[Resolved] before_main_content element mobile padding

[Adam]

Hello,

I’m having a bit of trouble finding out how to get padding on a mobile device on an advert i have inserted using before_main_content. The padding is fine for desktop but is not there at all on mobile. I guess it’s pretty simple to rectify – I just cant find the right setting!

Many thanks,

Adam

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

try this CSS:

@media (max-width: 768px) {
    .bsaProContainer {
        padding: 0 15px;
        box-sizing: border-box;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Scott M]

is there a version of this that would apply padding to both desktop and mobile views? I added an element to the before_main_content hook for the blog page so there would be an intro paragraph before my posts. however, i was hoping to add left and right padding so that it looked consistent with the padding for the rest of the site.

[Leo]

Removing the media query part @media (max-width: 768px) should make the CSS apply to all screen width:
https://docs.generatepress.com/article/responsive-display/

If you need more help on this, please open a new topic and link us to the site in question.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

THank you for your reply! Unfortunately this did not resolve my issue. Is there a way to apply padding to the mobile version (including padding for the sidebars) as appears on the desktop version? THanks

[Scott M]

maybe i should open a different support thread, but i am still having trouble. i used elements to add a paragraph before the posts start on the blog page. the hook i’m using is before_main_content. there is no padding around that paragraph. it looks ok on the desktop (not ideal though), but the text runs up against the edge of a mobile display. id really just like that paragraph to have the same padding as a regular page. you can see what i’m talking about here: ——

i’m a novice with css, and tried using simple css to add what you described and it didn’t change anything as far as i could tell. thanks for the assistance.

[David]

Hi Scott if you could raise a new topic and then we can provide you with 100% focus.

Adam – that Ad is being placed differently and the issue is its not responsive. Can you check with your ad provider on how to make the adlink responsive as there ins’t we can do to correct that within the theme.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

Thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts