Pro - Easier way of padding for columns on mobile?

Support
#1

Hi there,

I was wondering if you could help me?
On desktop versions of my sites, I like to have a lot of padding on my sections in Pro - sometimes 150px all round.
But on mobile this obviously looks very silly, as the text displays as a slither all the way down the middle of the page (understandly, because 150px on a mobile is a lot of padding!).

So my workaround has been this -
To create two sections on the same page with the same text - 1 with 150px padding (hidden on mobile) and one with 20,50,20,50px padding (hidden on desktop).
This seems to do the trick - but is a long workaround as a.) it means I am duplicating everything and b.) means I am having to show clients who want to edit their sites that they also have to do two edits of everything.

Is there a way I can set 150px for the desktop version (as I normally do inside Pro), and then in customiser add CSS code to turn all sections of the site into 20,50,20,50px padding on mobile devices?

Please see this website I am developing to see what I mean

Thanks!

http://www.vitalitynaturally.co.uk/

This page here does not have any duplication - just 150px padding on the section

http://www.vitalitynaturally.co.uk/recipes/

It displays as below

Desktop

Mobile

#2

Hi There,

Could you please try adding the following media query into your Theme Options > Global CSS area and see if that helps.

@media (max-width:480px) {
  .x-section {
    padding: 0 !important;
  }
}

Hope that helps.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.