This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Scaling row for mobile

Open 1 reply pluginplugin-page-builderquestion
chino75
9 years ago · Last reply by Andrew Misplon 9 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.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Andrew Misplon Staff 9 years, 10 months ago

    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.

Have a different question or issue?

Start New Thread