[Support request] Disable mobile view

[Allen]

hi

Currently I am using this snippet to disable mobile view, and its working fine in mobile.

add_filter( 'generate_meta_viewport', function() {
    return '<meta name="viewport" content="width=1024">';
} );

a) How can I fix my width at 1200 for desktop? and do not resize accordingly.
b) How can I keep my search bar within sidebar?

Thank you!

[Elvin]

Hi there,

for A)

You can change 1024 to 1200 on the content attribute but I personally don’t recommend doing this as the page will likely not be readable on smaller devices.

But you can try this.

<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=2, minimum-scale=0.5">

for B)

try adding this CSS:

.inside-right-sidebar form.searchandfilter * {
    width: 100%;
    padding-right: 0px;
}

[Allen]

hi!

A)
Thanks for the suggestion! Found out I am able to achieve what I want with

body .grid-container {
    min-width: 1200px;
}

and

add_filter( 'generate_meta_viewport', function() {
    return '<meta name="viewport" content="width=1024">';
} );

Can I know how can i keep sidebar even browser size is smaller than 768px? Currently both will hide.

b) work perfectly!

Thank you!

[David]

Hi there,

The sidebars are being hidden by your CSS:

@media (max-width: 768px) {
    #right-sidebar, #left-sidebar {
        display: none;
    }
}

Remove that.

And if you want to try and keep the desktop layout add this CSS:

@media (max-width: 768px) {
    #content {
        flex-direction: row;
    }
    .is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
        width: 20%;
    }
    .is-left-sidebar.sidebar {
        order: -10;
    }
}

But i am not sure how this is going to work on such a small screen.

[Author]

Posts