[Resolved] media queries

[morriscountynj]

is there a way to edit the breakpoints without going into the parent theme?
i see that they’re defined in the css here wp-content\themes\generatepress\css

i want to keep the “mobile” version to a higher breakpoint.

[Tom]

This is a tough one unfortunately – I wish there was a way to make it easier to modify without removing our mobile stylesheets and adding your own.

Do you want all aspects of the mobile stylesheet to happen at a higher breakpoint, or only some aspects of it?

[morriscountynj]

that’s what i thought 🙂

so this is the site i’m working on http://morriscountynjtest.info/mclib/
looks good on mobile and full screen. in mobile around 769 or so, the 3 column layout of the home page reappears and it’s very squishy and hard to read. it might be better to stick to the one column mobile layout at least until 900px or something like that.

[morriscountynj]

the site isn’t going to look like this exactly, going to be changing fonts and colors and whatnot, so the page might shrink a little. but i want the option to change the media queries for this. 🙂

[Tom]

There’s actually built in filters that allow you to set the width of your sidebars on tablet (1024px – 769px):

add_filter( 'generate_right_sidebar_tablet_width','generate_right_sidebar_custom_width' );
function generate_right_sidebar_custom_width()
{
	return '100';
}

add_filter( 'generate_left_sidebar_tablet_width','generate_left_sidebar_custom_width' );
function generate_left_sidebar_custom_width()
{
	return '100';
}

Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

Then add this CSS:

@media (min-width: 768px) and (max-width: 1024px) {
      .separate-containers .site-main {
            margin-left: 0 !important;
            margin-right: 0 !important;
      }
}

Adding CSS: http://generatepress.com/knowledgebase/adding-css/

Let me know if that does it 🙂

[morriscountynj]

i didn’t know this existed, that’s great 🙂

i’d love to be able to have the mobile styles go up to say 900px or so instead. having the 3 columns will look squishy no matter what size the sidebars are 🙂

[morriscountynj]

is there a filter of some sort where i can set the menu trigger to a different breakpoint? so i can have the hamburger menu a little longer, the menu wraps.

[Tom]

You can tell the mobile menu to initiate at your desired width with this CSS: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Adjust the 1000px to your desired breakpoint.

That should do it 🙂

[morriscountynj]

that does work!

it screws up the secondary nav though, when its in tablet size, the menu appears AND the mobile icon appears.
http://morriscountynjtest.info/mclib/

i’m having trouble figuring out which class is conflicting, any ideas?

[Tom]

Ha, good point. Do you want the secondary menu to break to the mobile menu at the same point as the main menu?

[morriscountynj]

probably not, the top menu is much smaller so i’d rather that behave as normal.

[Tom]

You can tell the secondary navigation not to toggle into mobile mode like this: http://generatepress.com/forums/topic/secondary-navigation-on-mobile-question/#post-120014

[morriscountynj]

good to know that you can do that 🙂

i DO want the menu to trigger though, just at a different point than the main menu.

[Tom]

Ah! Try the updates code: https://gist.github.com/generatepress/c23aef2d05807c39bb32

[morriscountynj]

YAY thank you 🙂

[Author]

Posts