[Support request] CSS to change all container padding

[Kelvin]

Dear Sir/Madam,

I have site using GP as theme and contain over 20 pages, I found the default padding of container is 40px for both desktop and mobile, it is fine on desktop but it used up a lot of space on mobile and make the content area too narrow, please refer to the screen capture from private information.

Can I change the left right padding only for mobile at once, or do you have CSS that I can do the same? I don’t want to change them one by one.

Best regards,

Kelvin.

[Elvin]

Hi Kelvin,

You can set a different container for padding by clicking the phone icon as shown here – https://share.getcloudapp.com/nOu5mxkz

[Kelvin]

Dear Elvin,

I tried but not work, refer to screenshot, I new a page and default padding to the container, it is 40px but refers to the customize layout, it is 100 20 20 20. Do you have any CSS element that I can force the setting at style.css?

[Elvin]

On your screenshot, you have it applied on the desktop viewport as indicated here – https://share.getcloudapp.com/d5u6e7d0

You need to click the mobile phone icon for it to show the mobile settings. – https://share.getcloudapp.com/4guPxBpW

[Kelvin]

Yes, I want to say even desktop is not the same padding to the new page and the setting from customize layout.

[David]

Hi there,

can you share a link to a page that has the correct padding, and the page that does not .

[Kelvin]

Dear David,

Please refer to the link in private information, the padding is fine to the desktop but I want to change all padding to mobile view.

[Elvin]

Ah I see now.

You have a Layout Element that is set to full width (no padding) and it overrides the padding settings on Appearance > customize > Layout > container.

In your site’s case I think you’re right to add the padding on the GenerateBlocks containers of each section. But make sure to use the Mobile tab settings to set a different padding for mobile – https://share.getcloudapp.com/BluDBldQ

[Author]

Posts