The custom CSS I’ve added to certain pages on my company’s website appear to not translate perfectly, depending on the size of the browser. The theme we are using a responsive one, so it does adjust according to those parameters. But I need to customize the layout so that the spacing of rows and spacing of images/text on those rows stays the same, no matter what size browser the site is responding to.
For example, I used a pre-made layout within Layout Builder, and then I customized CSS on the rows/widgets within Layout Builder so that the text boxes and images were spaced perfectly within the Layout Builder rows. But when I open the site on a smaller screen, those text boxes and images have shifted down within the rows, leaving extra space at the top or bottom of the rows and making everything look off center.
I’m just not sure which area to target in order to properly style the rows so that the spacing and placement of everything stays in tact no matter the size of a browser.
The site is: www.kingswoodproductions.com
I customized it on a Dell desktop computer, and then opened it on a Mac laptop. And the spacing issues are visible when I view the site on the laptop.
Thanks for any guidance!
Hi Kingswood,
You’re after media queries. Basically, it’s a way of specifically certain requirements to be met before the CSS kicks in. I would recommend giving these articles a read:
Media Queries – HTML Dog
Using media queries – MDN
Logic in Media Queries – CSS Tricks
For common device resolutions (for use with media queries), I would recommend referring to this website. For your computer specific websites, give this page a look.