Archived topic
Change full-width breakpoint
7 replies · Started by Arved on April 15, 2021
Hello,
I am trying to change the breakpoint when the page is displayed full width. Default seems to be 768px. I would prefer to change this value to 1146. -- https://arvedgitnenreiter.com
The mobile breakpoint for the menu was changed in the backend. But I couldn't figure out how to switch the page behavior (full-width).
From an earlier support forum topic I changed some values and tried
add_filter( 'generate_media_queries', function( $queries ) {
$queries['tablet'] = '(min-width: 100000px) and (max-width: 100001px)';
$queries['mobile'] = '(max-width:1147px)';
return $queries;
} );
That didn't work. I could try taking out the left side-bar with CSS between 768 and 1146. Not sure whether that's the best solution, though. Therefore:
What is the cleanest way to disable the "tablet" behavior and force mobile site behavior for 1146px and lower?
Thanks and best,
Arved
Hi there,
just to be clear - can you confirm:
1. The sidebar will only be displayed on screen sizes over 1146px?
2. The sidebar will be removed on screen sizes below 1146px?
Hi David,
yes, that's the idea. I am trying to remove the "tablet" behavior and make the website behave as if it was on mobile screens for 1146px and smaller.
Best,
Arved
You could use some CSS like this:
@media(max-width: 1146px) {
#content .content-area {
width: 100%;
}
#left-sidebar {
display: none;
}
}Hi David, Thanks for the suggestion.
Like this the sidebar is gone, but the secondary menu does still behave with the underlying logic of mobile <768px, tablet 678-1146px, desktop >1146px. On my website it should be showing first and secondary menu for >1146px and mobile off canvas manu <1146px.
Is there a way to solve this "genuinely" by a filter instead of "fixing" things with CSS? Is there a way to tell Generatepress that it behaves as a mobile website until 1146px and as a desktop website above 1146px, skipping the "tablet" rendering of the website?
Most likely we'll discover more odd behaviors when solving this with singular CSS fixes, I'd guess.
Best,
Arved
I am not sure if this will achieve what you need.
But this should apply the media query changes for that.
add_filter( 'generate_media_queries', function( $queries ) {
$queries['tablet'] = '(min-width: 1148px) and (max-width: 1149px)';
$queries['mobile'] = '(max-width: 1147px)';
return $queries;
} );Hi David,
Thank you for the snippet. Unfortunately it didn't change much. Therefore, I reverted back to your initial idea of removing the sidebar and the secondary-navigation via CSS. Works for now.
Thanks for your help!
Best,
Arved
Glad you found a solution!
