Flexbox (see link above). This seem not to give too many options with text scaling because if I make text too small its just becomes too small to read.
Normal flow - keep .blog-single article footer in the normal flow which would just stack the divs on top of each other meaning footer wouldn’t stretch horizontally as in flexbox approach
Scaling text is a bad idea, as you say, it will be too small to read. I only ever scale text that is quite large to begin with, such as main headers.
If the screen is too narrow for side-by-side blocks of text, the obvious approach would be to stack those blocks. Flex can handle that, with wrapping and a flex-basis, or you could use a query.
Or if you want more finite control add a media query at the appropriate screen width and line the items as you wish.
As Sam said don’t think that text should be scaled smaller for mobile. Indeed readable body text should be larger than the desktop version because it is harder to read on a small device. Body text should preferably no be below 16px on mobile but 18px is much easier to read (I used px as a reference guide only but of course you should use the rem equivalent).
Thanks for clarification Paul. Your code works fine. I tested again via Chrome dev tool for different screen sizes - all looks good except on two screen sizes there’s some misaligntment: 411 and 414 screen size.
I added the following media queries targeting above sizes and also considering your suggestion on font-size. Please see updated test link in post#1.
@media screen and (min-width: 411px) and (max-width:414px) {
.blog-single article footer {
flex-direction: column;
}
}
@media screen and (min-width: 280px) and (max-width:1024px) {
.blog-single p, .blog-single article footer {
font-size: 1.125rem;
}
}
You don’t need the min-width and max-width range rules above just use max-width and keep things simpler. Anything smaller than the max-width gets the rule you supply. You don’t need to limit it to 280px as that would exclude smaller than 280px which would not make sense.
I never use ranges and rarely see a need for them. Either use min-width media queries and go bigger (mobile first) or use max-width and go smaller (desktop first - my preference).
If you are concerned about a 3px range then chances are you have not coded efficiently to start with
It doesn’t matter if there are any screens or if they are not. The rule is superfluous as you would want the smaller screens to get your adjustments anyway:) Generally though apart from watches I think 320px is the smallest current phone (iphone se and iphone 5). Anything smaller is likely to be an old device or a very new device such as a watch and you don’t usually browse the web on your watch although it is possible.
At the end of the day you need to be device agnostic as you don’t know the smallest or the largest device that may be viewing. That’s why you have to be careful when you make granular decisions over a few pixels because its likely that you are tweaking it just for yourself. Your users may have bigger text as a default or a different platform with a different font or their own accessible font. They may have the whole page zoomed a little or they may just have text zoomed. The length of lines of text will vary from platforms even when using the same font and font-size. The mac display is often different from a PC display even when using the same values.
This is the lot of a web designer and you have to make choices for things that you don’t know in advance in the best way possible. Simple layouts are often more robust and the skill is creating designs that not only look good but also work well. There is no easy answer other than saying to yourself “What if”.
e.g.
What if there was one more menu item
What if the line of text is longer than I expected.
What if that text wraps or breaks out of the container.
What if that image is missing.
What if there is no room for side by side element.
What if the screen is massive
Totally agree on that. Definitely not easy to achieve.Thanks Paul for detailed explanation. Your “What if” list of questions should be considered for every page built for sure. I was also thinking about current navigation if it is well built in terms of accessibility (it pushes content down) vs. another type of navigation you showed me how to build (it overlays content) but I think I should revisit navigation later once I finish rest of pages and make final decision on what font to use.
