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

Home Forums Support [Resolved] Contained page hero and padding so header widget doesn’t overlap image

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1347817
    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?

    #1348146
    David
    Staff
    Customer Support

    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.

    #1348779
    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.

    #1348815
    Tom
    Lead Developer
    Lead Developer

    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?

    #1349980
    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:
    Without smaller width.

    With 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.

    #1350202
    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?

    #1350376
    David
    Staff
    Customer Support

    To remove the header widget at that size:

    @media (max-width: 1000px) {
        .header-widget {
            display: none;
        }
    }
    #1351137
    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.

    #1351347
    David
    Staff
    Customer Support

    No problems – glad to be of help

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.