Archived topic
Mobile Layout Tweaks Req'd for Page Using Elements
5 replies · Started by gedosan on October 17, 2019
Hi Guys
Please see the below URL on a mobile.
- The header element is showing the H1 tag at the top, I'd like it vertically centred (like the desktop)
- The body text on the left and right needs some padding.
Thanks!
G
Hi there,
1. Edit the Header Element > Padding - select the mobile icon beside the fields and adjust top and bottom to equal measures to center
2. Customizer > Layout > Container - looks like you need to add padding to the container.
I've just set the left padding to 20px as you suggest, and it appears to make no difference to this page (it works fine for normal pages). Looking in inspector, I see all this stuff that's stopping the padding take effect:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
margin: 0;
padding: 0;
}
Is there a bit of CSS I can apply to just this page to give the mobile view some padding? I have Tom's Simple CSS plug in so can add page specific CSS.
Cheers
G
Aah its because of this:
https://docs.generatepress.com/article/page-builder-container/
You have it set to Contained which has no padding. Set it to Default.
perfect thanks
happy to be of help
