Best practice for global css changes?

Hi typofi,

If you want to change something for all screen sizes, you shouldn’t need a media query at all. Now, with that being said, since we don’t know what theme you are using, or how it’s CSS is written, I can’t promise that is the case with your site.

Also you probably don’t need to use !important. Try adding specificity to your selectors instead.

So, for instance, if your .entry-footer is inside #footer, your CSS might look like:

#footer .entry-footer .avatar {
display: none;
}

Hope this helps to clarify.

Thanks for replying and that specificity link looks great. But I wasn’t expecting a generic answer but a theme related one. After all this is the Twenty Sixteen forum, right? (Hence the question about “global modifications to THE theme”. ?? )

My point was how to best do global css modifications to Twenty Sixteen. I already assumed that this is done with a child theme. I should have been clearer in my question.

I tried writing generic css mods to my 2016 child theme but they usually seemed to get overridden by the various media queries etc. by the parent theme. For example, writing a non-specific removal of the avatar did the trick for the mobile versions of 2016, but then the avatar popped back up when I viewed the large screen versions.

So I came up with what I showed in my example. And that made me wonder about if I’m doing it wrong in some way. That perhaps there’s a better way of doing global changes for Twenty Sixteen?

Hello,

You need to to be making media queries for the different break points (physical dimensions of user devices) that users will have. SO for example , a normal, non high resolution monitor may be something like 1280×900 pixels.

If you can,look at internet articles about mobile first. Everything is defaulted to 100% to begin with, so you don’t want to double code your mobile stuff. Ie you can have one css class that is used throughout site. For mobile it’s width is default (100%), so don’t set it to 50% (say for a desktop) and then have to reset it for mobile (100%) later.

SO you need to make a media query using max-width 1280px, or thereabouts .. ie.

// normal desktop

@media (min-width: 900px)
and (max-width: 1280px)
and (orientation : landscape)
{
your custom css for this range goes here
}

// high resolution screen

@media (min-width: 1281px)
and (max-width: 2000px)
and (orientation : landscape)
{
your custom css for this range goes here
}

Hope this helps you,

Neil.

Is everyone just confused because I said this was a newbie question? Yes, I get the whole point of media queries. And therefore, my question:

What is the best way to write CSS modifications to Twenty Sixteen theme through a child theme, so that the changes are implemented always despite what @media the user is on. (I.e. we could call such changes… oh, I don’t know… “global”.)

the best way is to write the global part of each class first.
ie color, background etc.

As far as I know you have to use a media query to make device size specifics.
ie. padding and margin

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

i would suggest to read a little deeper into specificty and overwrite the things you want by unsing the proper specificty.

in short:
browser > inline > id > class > tag

i dont think your problem is neither theme nor responsive related, you just have to figure out how to build your css selectors.

and yes, you should do it in the child theme. how is up to you.

My apologies, I was searching for the CSS tag, missed the Twenty Sixteen heading at the top of the page. That’s what I get for hanging out in the forums a bit too long when I’m tired.

Anything outside of a media query applies to all screen sizes. The only thing you should need to put inside media queries would be rules you want to apply for certain break points.

If you would like to provide a link to your site where you are having trouble, I’m sure one of us could provide more insight into the CSS you would need to make your desired change.

Thanks!

Okay, looks like my question might have been based on using a misbehaving MAMP. Because when I was seeing those odd media query overrides the site was just on MAMP localhost. Now that my site is actually online, the css works like it should. All non-specific css seems to work in all screen sizes.

Regarding the specificity: In the child theme’s style.css file, should I place changes to media queries above or below the global changes?

Glad you got that sorted out!

Place your media queries below your other styles. That doesn’t mean all media queries lumped at the bottom, but as you need media queries for various items, you put them just below the CSS that is applied to all screen sizes. For instance, let’s say you have padding on your navigation items, that you want to change on large desktop screens (1200px and larger). Your styles might look something like this:

.navbar-nav > li > a {
    color: #333;
    padding: 15px;
}

@media (min-width: 1200px) {
	/* Large - desktops */
	.navbar-nav > li > a {
	    padding: 15px 20px;
	}
}

Hope this helps!

Thanks for the advice!