Responsive homepage with elements and wpshowpost

Hello,

I've set up a homepage with a single post, 2 elements and posts excerpts inserted using wpshowposts.

I hope you can help me with a couple of questions, please.

1. I have inserted an element above the footer that, ideally, should be contained in the same container that the post content is contained by (not full width like the footer is).

At the moment, I'm using "generate_before_footer", but this is full width, so I've added some padding. This looks OK, but the width doesn't always line up with the page content.

Is there a hook that would appear below the post and be in the same container?

2. I'm using wpshowposts to insert rows of posts in 4 columns.

This looks good straight out of the box on a PC and on a tablet in landscape orientation.

But I thought it looked too crowded when viewed on a tablet in Portrait orientation.

Also, it breaks straight to 1 post wide on telephones, which looks good in Portrait orientation but looks a bit empty on larger telephones in Landscape orientation.

I've added some CSS so that the columns go from 4 to 2 to 1 column layout and tried to set the breakpoints so that it displays 2 columns for the tablet in Portrait orientation and larger telephones in Landscape orientation.

The CSS I used is:

@media (min-width: 600px) and (max-width: 1000px) {
   .wp-show-posts-columns .wp-show-posts-single {
        width: 50%;
    }

}

This seems to work OK, but I wanted to check whether it might interfere with any of the GeneratePress CSS, whether there's anything else that I should add, and whether there are more suitable breakpoints for doing this than 600 and 1000.

Thanks