Archived topic
change the blog page responsive breakpoints.
5 replies · Started by Mohammed on December 7, 2021
Hi,
thanks for your theme and generate blocks.
How can i change the responsive breakpoints for the blog page. 1024 and less for mobile. so that the blog post goes on top of each other rather than in two columns.
This PHP code doesn't seems to work on the blog page.
add_action( 'wp', function() {
add_filter( 'generateblocks_media_query', function( $query ) {
$query['desktop'] = '(min-width: 1536px)';
$query['tablet'] = '(max-width: 1535px)';
$query['mobile'] = '(max-width: 1024px)';
return $query;
} );
}, 20 );
thanks
Hi there,
This filter will only apply on GenerateBlocks' blocks. This won't work for the theme itself.
As for the theme, some elements can be adjusted but some of the styling are hard-coded CSS to the theme's main.min.css or all.min.css stylesheets. These stylings are to be overridden manually if you wish to change all of them.
Anything specific you want to change and we can advise?
ok i see. thanks for the help.
Sorry i saw a topic bout that, and thought it would work, but didn't read it well apparently.
i changed the breakpoints in the main.min.css, but that didn't work.
i'm not sure if i'm doing the right edits.
Hi there,
add this CSS to your site:
@media (min-width: 768px) and (max-width: 1024px) {
.generate-columns-container .generate-columns.tablet-grid-50 {
width: 100%;
}
}DO NOT make edits to the Themes files as those changes will be lost when the theme is updated.
You can add the CSS to the Customiser > Additional CSS. Or read this doc which explains other methods:
Yes that worked.
Thank you very much for the help.
You're welcome
