Home>Support>Scaling row for mobile

Scaling row for mobile

By chino75, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

Hello Support,

I have a row which contains texts and a background image(set to cover).
The following css is applied to row style
padding-top: 200px;
padding-bottom: 250px;

Problem is when viewing on mobile, the row is too high.
How can i scale down the whole row with 40% including the font size?

This is my page http://www.orangelabdesign.nl/

Would it be possible to scale down the background image as well, when set to cover?

Many thanks in advance!

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, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Chino75

    Thanks for reaching out.

    The short answer is, media queries. What you’d need to do is edit the row and using the Attributes tab on the right, assign a row class, any name you choose like:

    custom-padding

    Then, in Custom CSS you’d say something like:

    @media (min-width: 780px) {
	.custom-padding {
	    padding: 200px 0;
	}
}

    By using a media query we can ensure the padding doesn’t begin until the resolution is at least 780px. You can of course adjust this point.

    Hope that helps get you started :)

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