- This topic has 8 replies, 3 voices, and was last updated 3 years, 8 months ago by David.
-
AuthorPosts
-
July 1, 2020 at 1:05 am #1347817Joey
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?
July 1, 2020 at 6:57 am #1348146DavidStaffCustomer SupportHi 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.July 1, 2020 at 1:35 pm #1348779JoeyYeah, 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.
July 1, 2020 at 2:49 pm #1348815TomLead DeveloperLead DeveloperGiving 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?
July 2, 2020 at 4:31 pm #1349980JoeyThe 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.
July 3, 2020 at 12:07 am #1350202JoeyI 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?
July 3, 2020 at 4:24 am #1350376DavidStaffCustomer SupportTo remove the header widget at that size:
@media (max-width: 1000px) { .header-widget { display: none; } }
July 3, 2020 at 5:15 pm #1351137JoeyThat 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.
July 4, 2020 at 1:06 am #1351347DavidStaffCustomer SupportNo problems – glad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.