Home>Support>Responsive row height css

Responsive row height css

By Dom Lonsdale, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

So I’m a complete beginner at all this and I developed my site following the tesseract theme tutorials.

Here is my site; www.amaphor.co.uk

In the page builder I have three rows with the middle one being the main content. The rows above and below the main content need to be able to change in height depending on the screen size ( When on iPhone the height above the main content should be about 20px but on desktop it should be 350px and same with the row below.)

I’ve approached this problem by giving the top row a class title (spacertop) and adding this in to the css;

@media screen
and (min-device-width : 375px) { class=”.spacertop” height: 20px }
and (max-device-width : 667px) { class=”.spacertop” height: 350px }

I’m hoping someone can help me around this?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Dom

    Thanks for reaching out. We don’t currently have anything native to Page Builder or the Widgets Bundle that can assist with equal height columns. In the mean time you could perhaps try a plugin like this: https://wordpress.org/plugins/equal-height-columns/.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More