Archived topic
Disable mobile view
3 replies · Started by Allen on December 22, 2021
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!
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;
}
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!
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.