[Support request] Mobile Layout Tweaks Req'd for Page Using Elements

[gedosan]

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

[David]

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.

[gedosan]

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

[David]

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.

[gedosan]

perfect thanks

[David]

happy to be of help

[Author]

Posts