Contained page hero and padding so header widget doesn’t overlap image

[Joey]

I have a page hero in the form of a magazine image and featured articles as a header widget header to the right (https://simipress.com/home/). I’m having trouble figuring out how to keep the widget from overlapping the magazine image when the screen size gets smaller, and how to position it.

My first question:

How can I make the widget cut to above the image sooner so it doesn’t overlap? I tried changing the max width via:

header wigit:
.header-widget {
    float: right;
    max-width: 50%;
}

But it doesn’t fix the issue. I had to set when the mobile menu appears to 500px because the mobile menu otherwise cuts through the page hero image, so I can’t adjust it via that method.

My second question:
I’m using WC Show Posts plugin to make that featured article list. I used this code to get rid of the spaces:

.wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) {
    margin-bottom: 5px;
}

But it is affecting my other lists on the webpage that use WC Show Posts and can’t have spaces. Is there a way to modify the above code to only remove the spaces on this particular widget?

[David]

Hi there,

1. At some point the widget is going to overlap the image before it hits mobile.
And we can write some CSS to adjust for that – but what happens if you use a wider featured image?

Whats the ideal outcome ?

2. if you mean the list in the header widget use this:

#wpsp-3000 .wp-show-posts-single:not(:last-child) {
    margin-bottom: 5px;
}

#wpsp-300 is the unique ID for that WPSP list. Each list has one and the number is the same value you see in the WPSP Shortcode.

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

[Joey]

Yeah, the header widget, thank you. Now I see, I can just inspect element and find the wpsp.

The featured image will change but will always be the same size, 762px x 1080px, or a 6 x 8.5 ratio, and centered, what is uploaded on there now. If it was full screen that would be 1920 x 1080.

When I contain it, it leaves a small empty space at the bottom on mobile, but I can live with that. Honestly that would be a good place for the widget; but if I can keep the header widget from overlapping the current image size on smaller screens, it will look good.

[Tom]

Giving the header widget a width helps:

.header-widget {
    max-width: 250px;
}

However, it will begin to overlap at around 1185px wide. Where would you want it to go at that point?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Joey]

The smaller width helps, but when it switches positions to above the image (maybe tablet size) it now has padding that is pushing it to the left. See the pictures:

Without smaller width:

With smaller width:

Just floating on top is fine. It currently switches over at 770px (needs to do it at about 1000px). Thanks a lot to both of you for all your help.

[Joey]

I found a simpler solution. If I set the mobile menu breakpoint to 768, then there are never two conflicting menus because it breaks when the secondary menu disappears. Sorry, I’m still figuring this theme out.

The widget with 768 now never switches to above the image. Is there a way to just make that widget disappear at 1000px and smaller?

[David]

To remove the header widget at that size:

@media (max-width: 1000px) {
    .header-widget {
        display: none;
    }
}

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

[Joey]

That is a really simple solution, I feel a little stupid. Sorry to waste your guys’ time.

I’ll open a separate post for the issue with empty space, I think that’s the last issue with the website. Thanks again to both of you.

[David]

No problems – glad to be of help

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

[Author]

Posts