[Resolved] Tablet Sidebar Visibility

[Matt Stern]

Hi there,

Is it possible to keep the right sidebar in place as low as 768px? It currently goes below the main content at 768px, but I think it would look good on ipads of that size. 🙂

Link here: https://sternstaging2.com/the-surprising-ways-that-sleep-affects-your-metabolism/

Thanks kindly,

Matt

[Fernando]

Hi Matt,

What dimension for instance are you looking at for a tablet below 768px width?

[Matt Stern]

Well, it’s 35% on desktop, so maybe 25% or 30%. That would be around 200px at 768. Does that help?

[Fernando]

I see. Can you try adding this snippet?:

add_filter( 'generate_media_queries', function( $queries ) {
    $queries['mobile'] = '(max-width: 767px)';

    return $queries;
} ); 

This snippet moves the breakpoint of tablet to 768px.

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

[Matt Stern]

Added via code snippets, but see no change to layout. I’ll check back tomorrow to see if you have another idea, not a big deal if not. Thanks.

[Fernando]

I see. Can you try adding this through Appearance > Customize > Additional CSS?:

@media (min-width: 768px) {
    body .site-content {
        flex-direction: row;
    }
}

[Matt Stern]

Hi Fernando, I decided to set this aside for now. Thanks!

[Fernando]

I see. You’re welcome, Matt!

[Author]

Posts