Docs

[arefs]

I’ve set the padding for a section to 100 left and and right.

However, on a mobile device this looks bad.

How can I set this padding so it only displays for certain screen width?

I want to display it for only XL and LG screen widths.

Thanks.

[Rue Nel]

Hello There,

Thanks for writing in!

The best recommend I could is this. Please insert a custom my-section class in your section. We will then use a custom css so that the padding will only be visible in large and extra large screens. You can make use of this code:

@media(min-width: 980px){
   .my-section{
     padding-left: 100px;
     padding-right: 100px;
   }
}

Hope this helps. Kindly let us know.

[arefs]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for updating the thread! Would you mind providing screenshots of what you mean? We are unable to see or replicate your issue on our end. Would you have happened to have solved your issue already? The CSS seems to be working properly on both links on our end. Please update us otherwise – thanks!

[arefs]

I can do better than screenshots. Please watch this 90 second video which should make it very clear – https://dl.dropboxusercontent.com/u/17713251/2016-05-04_1018.swf

[Lely]

Hi There,

Thanks you for the video.
If you want to use those class for different pages, please just add the CSS on Appearance > Customize > Custom > Edit Global CSS so you don’t have to add it on every page Settings Tab > Custom CSS. We need the !important to override the inline CSS. Based on CSS specificity, inline CSS will work first. We should update the CSS to this:

@media(min-width:980px){
.my-custom-width{
  padding-left:100px !important;
  padding-right:100px !important;
}
}

Please also make sure that you have added the complete code correctly. On contact page, I can see that @media line is missing. You just added this:
.my-custom-width{padding-left:100px;padding-right:100px;}}

Hope this helps.

[arefs]

Thank you!

[Nabeel A]

welcome 🙂

[Author]

Posts