Archived topic
CSS to change all container padding
7 replies · Started by Kelvin on October 21, 2021
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.
Hi Kelvin,
You can set a different container for padding by clicking the phone icon as shown here - https://share.getcloudapp.com/nOu5mxkz
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?
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
Yes, I want to say even desktop is not the same padding to the new page and the setting from customize layout.
Hi there,
can you share a link to a page that has the correct padding, and the page that does not .
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.
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
