Archived topic
Generate Blocks How to add padding for tablet and mobile
3 replies · Started by MMS on September 5, 2021
Hi, I've created a 900px wide GB Element (layout) for my blog posts / pages. I've chosen the content option "Contained (No Padding) which on desktop is fine but on mobile and tablet, some padding is required. I've tried the following custom CSS which gives me padding on all devices but it doesn't seem to work on the featured image i.e. the text is padded but not the image. How can I fix it so that both image and text are equally padded on desktop and mobile?
.content-area {
padding: 20px;
}
See following dummy article:- https://makemesustainable.com/how-to-conserve-energy-11-ways-to-save-electricity-at-home/
Hi there,
if you want to maintain the Themes padding then you should set the Content Container to Default. You can still set a width.
Hi, If I do this my home page width will be affected? How do maintain the home page width settings but set the padding for mobile / tablet for posts/pages (set at container width 900px) ?
You can create multiple Layout Elements.
One for your Home Page - set the Display Rules > Location just to Front Page plus any other Pages you want the same layout eg. Pages > All Pages would apply to All Pages.
Then create a separate Layout Element for your Posts. Location would be: Posts > All Posts.
For this one you use the Default content container, so it keeps the themes padding.
