Setting CUSTOM Responsive CSS-media max-width ranges

[michael]

I have the latest versions of WordPress & GeneratePress Premium.

I have a child theme made form GP-SiteLibrary-Mellow

In my style.css, I have set the Mobile media max-width:500px.

On testing I discovered there are several other media max-width’s involved, I DONT WANT THOSE.
I only want media (max-width: 500px).

I cant correctly set my Mobile-HamburgerMenu Widths on Openning & Closing the Menu-Toggle-Hamburger on home page.
in MobileScreen I need to FULLY hind the ExpandedMenu untill Toggled ON, then have ExpandedMenu show flushedRight.

I checked the Chrome-ViewSourceCode & discovered a couple style tags that I didn’t set:
1) style id=’generate-style-inline-css’ 2) style id=’generate-navigation-branding-inline-css’

How do I change these values and/or remove these unwanted code blocks???

[David]

Hi there,

the theme comes with several breakpoints that cannot be simply removed.
Looking at your site the only ones that probably apply would be typography and mobile menu breakpoint rules.

What exactly are you trying to achieve ? Is it to change when the Mobile Menu appears ? If so then this may be of help:

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[michael]

Thanks David,

Yes, you are correct, I’m trying to set when MobileFormat appears. I am also interested in when TableFormat appears, as opposed to Desktop.

I will test what you have advised.

Where do I set TabletScreen format-media triggering????

I guess Mobile Format should be triggered at MobileLandscape width 758px. Tablet Format should be triggered at TabletLandscape width (around 10 inches). Desktop is default at greater than 10 inches.

[Tom]

Hi there,

Not everything is controllable using these filters, unfortunately.

However, you can adjust the queries like this:

add_filter( 'generate_media_queries', function( $queries ) {
    $queries['tablet'] = '(min-width: 769px) and (max-width: 1024px)';
    $queries['mobile'] = '(max-width:768px)';

    return $queries;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts