before_main_content element mobile padding

Hi there,

try this CSS:

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

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.

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!

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

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.

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.

Thank you!

You're welcome