Hi everyone,
My question is about responsiveness that goes beyond the 1200 px desktop setup. I’m trying to design a page where it needs to be very readable for an older crowd. Many people have new laptops, 1680x1050 is very common resolution. When I design something for that resolution, say I set fonts to 18px, the users are happy. However, at when that setup shows up on 1200px wide the fonts end up being way too big, also effecting the general layout in a way that doesn’t look good. If I design it for 1200px then the fonts end up being too small for them at higher resolutions.
So, how do I setup so that I can present a different font size, at least for certain areas? Maybe another way to look at it, I’m looking for another option to add to responsive options during responsive design that might be for 1600px and up.
Thanks,
Miro
If you are using styles for your text elements (which you probably should be doing) you can set up a style-wide conditional that decreases font size below certain page widths. (Current page width<1200)
1 Like
set 14px or 15px for regular text, and after page width >1800 make 18px, 14 and 15 are highly generic and you don’t need to decrease for mobile.My personal thought is you need to use max 16px but if you say so do that way.Always remember this, mobile processors are slower than desktops and as desktop width gets bigger processors gets more powerful so you want to push that conditionals to powerful processors to optimize for speed.
1 Like
and if you do decide to use conditionals for mobile ( <500) move up the conditional conditional hierarchy matters and upper one process first so it will look like this ( regular 14px 400, if page width <500 font size : 12px400 , if page width >1800 font size 18px
1 Like
I completely agree with @nico.dicagno and @emir.ozgun. You can change the font size according to your needs on condition tab. Here is an example
Please ask If you have further questions. Happy bubbling 
1 Like
