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

This topic has 17 replies, 5 voices, and was last updated 5 years, 4 months ago by Leo.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
November 16, 2020 at 12:20 pm #1533853
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.
November 16, 2020 at 12:22 pm #1533855

Elvin
Staff
Customer Support

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

November 16, 2020 at 12:49 pm #1533867

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

November 16, 2020 at 4:59 pm #1533996

Elvin
Staff
Customer Support

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?

November 16, 2020 at 5:05 pm #1534001

Mathieu

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

November 16, 2020 at 5:17 pm #1534006
Elvin
Staff
Customer Support
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.
November 16, 2020 at 5:33 pm #1534019

Mathieu

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

Both zone would need to be 100%

Thanks

November 16, 2020 at 6:24 pm #1534041

Elvin
Staff
Customer Support

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.

November 17, 2020 at 5:22 am #1534499

Mathieu

Hi Elvin,

Here’s my screenshot.

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

Thanks.

November 17, 2020 at 6:55 am #1534801
David
Staff
Customer Support
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;
    }
}
```
November 17, 2020 at 7:29 am #1534852

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.

November 17, 2020 at 7:33 am #1534858

David
Staff
Customer Support

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

November 17, 2020 at 7:44 am #1534888

Mathieu

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

November 17, 2020 at 8:09 am #1534942
David
Staff
Customer Support
Try adding this to remove the one with the label:
```
@media(max-width: 1024px) {
    .has-menu-bar-items button.menu-toggle {
        display: none;
    }
}
```
November 17, 2020 at 8:55 am #1534996

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