Archived topic
Full width HERO image on mobile... and collapsing of the sidebar on small tablet
17 replies · Started by Mathieu on November 16, 2020
Hi guys,
I am currently converting my custom code from the grid version to the new flex version. I feel late to the party, but whatever, still happy on the great job you did.
I had a piece of code that would make the HERO image in the article full width on mobile. Not 100% of the canvas but 100% of the screen.
@media (max-width: 1024px) {
.one-container.right-sidebar.post-image-aligned-left .no-featured-image-padding div.featured-image {
margin-right: -30px;
margin-left: -30px;
}
}That doesn't work anymore. How can I make it work, clean and not hacky in the new flex way?
Also, I had a piece of code that would drop the sidebar on a small tablet in portrait mode instead of a having a super narrow useless sidebar.
@media (max-width: 1024px) {
#primary, #right-sidebar {
width: 100% !important;
float: none !important;;
}
#main { width: 100% !important; margin-right: -15px; }
}That also doesn't work anymore.
All-in-all, I am pretty much compatible :)
Best regards, thanks and have a nice day.
Hi,
Can you link us to a page where this is occurring?
You can add the site details on the private information text field. Thanks! :)
Yes! I have succeeded with the first point, it was that line "#main { width: 100% !important; margin-right: -15px; }" of the second point that made it fail.
But still can't make the sidebar collapse.
I added my test URL.
Thanks
But still can’t make the sidebar collapse.
I'm not exactly sure what you mean by this.
To clarify: Do you mean to hide the sidebar on small tablets?
Not hide, put it at the end like on a cellphone.
Not hide, put it at the end like on a cellphone.
Ah right. Thanks.
You can make the site content display in a column fashion on tablets by adding this CSS:
@media (min-width:769px) and (max-width:1024px){
.site-content {
flex-direction: column;
}
}This should automatically wrap the sidebar below the main content.
That did wrap the sidebar below main content but they are still the same size.
Both zone would need to be 100%
Thanks
To clarify:
Are we seeing the same thing? Here's what I see on my end: https://share.getcloudapp.com/9ZuB57yb
Both sidebar and primary content area seems 100% of their containers already.
Can you provide screenshots of what you're seeing on your end? thank you.
Hi Elvin,
Here's my screenshot.
It also seems to add a second hamburger menu when it happens.
Thanks.
Hi there,
try this CSS instead:
@media(max-width:1024px){
.site-content {
flex-direction: column;
}
.site-content .content-area,
.is-right-sidebar {
width: 100%;
}
.one-container.right-sidebar .site-main {
margin-right: 0;
}
}Well, that does solve the sidebar and the 100% width.
But I still have the double menu hamburger at that resolution even with the default generatepress and no custom code.
Can you disable your cache plugin as i believe that is messing with the CSS order.
I have disabled autoptimize and my child theme to have stock GeneratePress. I still have the double hamburger.
Try adding this to remove the one with the label:
@media(max-width: 1024px) {
.has-menu-bar-items button.menu-toggle {
display: none;
}
}If I does that then there's no menu at all on mobile.
It's the one without the label that shouldn't be there.
