In searching for the best way to vertically center a div (age-old dilemma), I stumbled across an issue with missing fonts when flexbox is used.
See this CodePen for live example of what I'll describe below:
http://codepen.io/Mattaton/pen/PNzWEQ
-- All of my testing is on Windows 7 using Chrome --
I used flexbox to do the horizontal and vertical centering on a form. That worked fine until I realized that if a font is missing, the form inputs will run outside of their containers.
In this example, I have 'Open Sans', Helvetica, Arial, sans-serif; for the default font-family on the body. ($font-set1 in the CodePen)
That works fine, but if Open Sans is removed, $font-set2, Helvetica is missing on most Windows PCs and so it should fallback to Arial. Which it does, sorta.
The font face itself changes as seen in the input placeholders. The font looks like Arial, but the input sizes change to something I assume the containers didn't expect and they don't expand to compensate/contain the inputs.
Moving on to $font-set3 where Arial is the first font and installed on Windows PCs, then the inputs look correct again.
All of this only happens when flexbox is used for centering. If I disable flexbox on .form-wrapper then the entire form expands to the full max-width of 800px set on .signup-form.
I'm not sure if this is a bug I can do nothing about or if there's something I can do to fix it. Anyone know?
Here's an image describing the problem:
Related
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
I have a responsive site design, most of which works just fine.
On the checkout page though I have a Select element for selected a country. Some of the options are very long, the "Congo, the Democratic Republic of the" for example. This pushes the layout out to the right, breaking the layout and making the layout scroll horizontal - which is horrible ;)
If I remove the select completely, the layout displays fine. And if I remove all the options and put short tests ones in their place it also works fine. So I'm pretty sure its the long Option's which is the issue. The Select itself is only 50% wide, so that doesn't run off the screen - its the 'invisible' option elements.
Here is a temp link: http://moymadethis.com/oca/test.html
Works fine on desktop, issue is on iphone mobile (safari, chrome and opera).
Thanks, hope someone can shed some light on a solution for this?
Steve
Normally it suffices to set width on the select element itself (as opposite to setting width on its parent – the inner element will by default overflow if needed), e.g.
select { width: 6em; }
When the menu is opened (when the element is focused), the options will then appear in a width required by their context, but this will appear in a “layer” on top of the page content, so it should not disturb layout.
If problems remain, please post minimal HTML and CSS code to reproduce the problem and identify the platform(s) and browser(s) tested.
I've recently had exactly the same problem on a project i'm working on. I found the solution was to use !important on the select width which in my case was 100%. This allows the solution to work perfectly on mobile and desktop.
try using max-width on select element
eg #myselect {max-width:95%;}
On iPhone with iOS 15.4.1, I also needed to specify overflow-x:
#myselect {
width: 50%;
overflow-x: hidden;
}
Selected option value never overflows outside of <select> boundary box, but browser behaved as if it did overflow - parent element width clearly changed based on option that is currently selected. With above styling, this no longer happens.
I'm having an issue with Outlook and when Windows Display (Control Panel > All Control Panel Items > Display) is set to Medium - 125% (or larger)
The text in the newsletter appears bigger and is creating issues with spacing. Although most of the issues with this can be resolved, I would like to know if there is a way to force Outlook to respect the pixel sizing as defined in the html email.
An example code block is something on these lines
...
<td width="460" valign="baseline">
<p style="font-size:16px;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;" >Hello </p>
</td>
...
The text inside the <p> tag is 16px on a machine that has Windows Display 100% but is larger when Windows Display 125% (interestingly, the browser still respects the 16px and does not increase the font size like Outlook)
I don't think you're taking the right approach to this problem. Please look at it another way.
The user said "I want my text to be bigger". They probably said that because they have a very high res display or they have visual difficulties. It's their preference, if not their need, to have bigger text.
You're saying "how do I override the user's preference for my cosmetic convenience?".
Don't do that. Fix your layout's design so it adapts better to varying text sizes.
Reduce your image use and/or place your images so that they can handle being pushed around by the text. Consdier using scalable units like em or percentage font sizes to be more friendly toward people with visual difficulties or very-high-res displays.
Background:
The reason Windows scales fonts (and pixels) like this is because software developers for the platform have been consistently ignoring the font sizes the user sets in Explorer and the theme. Apps often force the use of their own fonts with specific pixel sizing instead of using the system fonts and sizes.
This has led to lots of apps that're unusable for people with visual difficulties, on media PCs, etc.
Microsoft wanted to give users a way to override these badly behaved programs, so they gave users a way to scale the pixel sizes provided by applications by a fixed percentage. Essentially they redefined a font "px" as an abstract unit that can be scaled.
Your HTML email is trying to be one of those badly behaved programs.
On an existing website, one block of text is displaying too large on an iPhone, and part of it is white. I've tested it on Android and on an iPad, which pushes the rest of the site down too far, so it doesn't line up with the background. It is the proper size on an iPad, but still showing up white. The text in question is in the top right corner on this page: http://www.ecodzign.com/waterfx2/index2.html
This is how it looks on an iphone:
I've disabled text scaling, and I've tried using inline css, with no effect. Only phone numbers are displaying white, so I assume the iphone is creating some sort of link to call those numbers with the phone, but regardless, that can't be white with a white background.
I apologize for the awful table design and lack of validation, but I'm simply not budgeted to redo the entire site properly. There are no validation errors that have to do with text or formatting, I doubt that has anything to do with what is going on.
This could be the difference between things like pt vs px vs % on your iOS device for that specific block.
After checking your code, I think this is it in fact:
font-family: Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
font-weight: bold;
The font-size: 8pt I would bet is the culprit.
There looks to be a lot of inline CSS on the site.
What it you tried this
<span style="color:black !important;">702.233.3200</span>
utilizing the !important keyword.
That most likely has to do with the CSS of the website. Your best option would be to create a mobile friendly site or removing <span style='color:black;'> from the html that wraps these numbers.
So, I've been using this little bit of Javascript (as a bookmark) to increase the font size of various websites I visit on my iPhone's Safari browser (zooming in leads to too much scrolling from side to side).
http://www.everythingicafe.com/forum/iphone-software/increase-font-size-in-safari-without-zooming-9511.html
javascript:for(i=0;i<document.getElementsByTagName ('*')
.length;i++)void(document.getElementsByTagName('*' )
[i].style.fontSize='18pt');
However, this doesn't work on any of the StackOverflow sites. Any suggestions on how to fix it?
Poking thru the CSS in FireBug doesn't give me many clues except for a font-size: 100% that is in the p tag.
I tried changing fontSize='115%'); and it changed some of the text but not the question/answer body (the most important stuff!)
Stack Overflow uses relative font sizes for everything.
Here is a simple fix to adjust the font size for the entire document:
javascript:void(document.body.style.fontSize = '16pt');