Fix Column and Text Layout Across page and screen sizes

[rbkerr]

Hello,

I would like 2 columns to not stack across a page when viewed on smaller screens.

Is there a way to have the font reduce in size on small screens so that the layout appearance is consistent across different viewing sizes?

I can’t recall how but I was able to achieve this on one site using 5 columns of flipcards. On a large screen the flip cards have large fonts, on a small screen, it still keeps the 5 columns across the screen but just reduces the fonts to fit in all the content.

In many situations I’d prefer people zoom in and out of the page, rather than loose the design and layout look.

Where I got it to work is it because I have a large background image that is fixed across the screen? I tried adding the same image on the new site background but it just clips the sides of the image and puts the large font in a long skinny column.

I’d like to keep the same number of words across the screen with similar spacing ratios across all screens.

I’ll post the site I want this on in a secure note with the site it works on.

Thanks, Rob

[marc_a]

Hi Rob,

Thanks for reaching out.

If you would like the font size to reduce on the smaller devices, I suggest that you will use vw unit. Here’s some example of how the vw unit works.

• https://www.w3schools.com/howto/howto_css_responsive_text.asp
• https://css-tricks.com/fun-viewport-units/

Hope that helps.

Thank you.

[rbkerr]

Excellent. Thanks for a great learning starting point. I’ll see how I go. For now I’ve settled with hiding certain columns for small screens. You can close the ticket thanks.

[ruenel]

You are most welcome.