General question about responsive css overrides

Hello,

i often use override,css for your templates. My question is: How can i override responsive css data in override.css?

Is there a special suffix or anything like that, that i have to use in override.css, so that only the desired responsive css data will be overrided? Or can i make responsive css changes only in the correlating responsive css file? (like tablet.css or mobile.css)

regards

Code: Select all

@media (max-width: xxxxpx) {
#gkHeader {display:inline-block;}
}


This override will make gkHeader id element inline-block for devices with width below xxxx px.
Breakpoints are set in template settings so you should match them.

Code: Select all

@media (max-width: xxxxpx) {
#gkHeader {display:inline-block;}
}


This override will make gkHeader id element inline-block for devices with width below xxxx px.
Breakpoints are set in template settings so you should match them.

Ah, okay, sounds logical, i will try this! Thank you!

You can also check page source (view source in your browser) and in header section you will find something like this:
<link rel="stylesheet" href="templates/gk_musicstate/css/small.desktop.css" media="(max-width: 1200px)" />
<link rel="stylesheet" href="templates/gk_musicstate/css/tablet.css" media="(max-width: 1030px)" />
<link rel="stylesheet" href="templates/gk_musicstate/css/small.tablet.css" media="(max-width: 820px)" />
<link rel="stylesheet" href="templates/gk_musicstate/css/mobile.css" media="(max-width: 620px)" />

As you can see there are 4 css files and each is loaded at specific maximum screen size (so it works with browser's width not higher than set.
This way you can check the @media breakpoints even easier.

Thanks, Cyberek, very helpfull!