[Resolved] Full width HERO image on mobile… and collapsing of the sidebar on small tablet

[Mathieu]

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.

[Elvin]

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! 🙂

[Mathieu]

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

[Elvin]

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?

[Mathieu]

Not hide, put it at the end like on a cellphone.

[Elvin]

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.

[Mathieu]

That did wrap the sidebar below main content but they are still the same size.

Both zone would need to be 100%

Thanks

[Elvin]

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.

[Mathieu]

Hi Elvin,

Here’s my screenshot.

It also seems to add a second hamburger menu when it happens.

Thanks.

[David]

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;
    }
}

[Mathieu]

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.

[David]

Can you disable your cache plugin as i believe that is messing with the CSS order.

[Mathieu]

I have disabled autoptimize and my child theme to have stock GeneratePress. I still have the double hamburger.

[David]

Try adding this to remove the one with the label:

@media(max-width: 1024px) {
    .has-menu-bar-items button.menu-toggle {
        display: none;
    }
}

[Mathieu]

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.

[Author]

Posts