Adding Media Query to eliminate CSS on devices
-
Hi all I’m really new to CSS and I’d like to change my nav bar so that my CSS only shows up on a desktop and not on devices like an Ipad or Iphone. I’d like to use the original themes set up for those devices.
I am hoping to find a solution using a media query to set up some sort of parameter that says something equivalent to “only use this CSS on screens larger than xxxxxx”
Here is my current CSS. Thanks so much for any help!
.site-header { padding: .1rem; } div#container { width: 200px; background-color: white; padding: 250px; } div#container { width: 100%; background-color: #eee; padding: 50px; } nav ul li { float: center; margin-right: 0 em; margin-top: 20px; margin-bottom: 100px; margin-left: 0 em; } nav ul li a { padding: .25em 2.3em; text-decoration: none; /* no underline */ background-color: white; /* white */ color: #4312AE; /* dark blue */ border: 2px solid black; border-top-left-radius: .5em .5em; /* rounded corner! */ border-top-right-radius: .5em .5em; /* another rounded corner! */ border-bottom-left-radius: .5em .5em; /* rounded corner! */ border-bottom-right-radius: .5em .5em; /* rounded corner! */ } nav ul li a:hover, nav ul li a:focus { color: black; background-color: black; font-weight: regular; } #header { position: relative; height: 120px; margin-bottom: 20px; z-index: 1000; } #nav { text-align: justify; min-width: 500px; } #nav:after { content: ''; display: inline-block; width: 100%; } #nav li { display: inline-block; } #nav { display: inline; height: 87px; width: 600px; } ul { margin: 30px; padding: 30px; } #content { margin-top: 25px; } list-style: none; margin: 0 20px; padding: 50; display: flex; justify-content: space-around; nav ul { width: 100%; margin: auto; }The blog I need help with is: (visible only to logged in users)
-
I am hoping to find a solution using a media query to set up some sort of parameter that says something equivalent to “only use this CSS on screens larger than xxxxxx”
Assuming you’re referring to this site – jordanspuck.com – running Illustratr, you can try wrapping your CSS tweaks in a media query like this:
@media screen and (min-width: 1220px) { /* your CSS overrides go here */ }I found the 1220px “breakpoint” in Illustratr’s stylesheet.
Let me know how it goes.
-
Hi Kathryn, happy to say something is happening with this but it seems that at 1220 and really any number higher or lower I’ve been using that it just eliminates the CSS on the desktop and the phone and I just want to eliminate it on the phone and iPad, perhaps if I play with it more later I’ll figure it out, thank you for your quick feedback and if there is something im missing please let me know!
Jordan
-
The only thing I see in your Customizer’s CSS panel right now is this:
@media screen and (min-width: 1220px) {You’ll need to add your custom CSS after that, followed by the closing bracket:
}What that will then do is apply any CSS in between the outer curly brackets only to screens wider than 1220px.
-
kathryn,
I think I get what you’re saying– add @@media screen and (min-width: 1220px) { AND THEN INSERT ALL CSS HERE }
below I have closing brackets with each individual piece of css meaning I have the opening bracket after setting up my media screen and then several openings and closings for each piece of CSS– Do i maybe have to just use one opening and closing bracket for everything?
Sorry if this isn’t making sense–perhaps there are some concepts i’m still not understanding correctly, thanks for your help.
This is what I have
@media screen and (min-width: 1220px) { .site-header { padding: .1rem; } div#container { width: 200px; background-color: white; padding: 250px; } div#container { width: 100%; background-color: #eee; padding: 50px; } nav ul li { float: center; margin-right: 0 em; margin-top: 20px; margin-bottom: 100px; margin-left: 0 em; } nav ul li a { padding: .25em 2.3em; text-decoration: none; /* no underline */ background-color: white; /* white */ color: #4312AE; /* dark blue */ border: 2px solid black; border-top-left-radius: .5em .5em; /* rounded corner! */ border-top-right-radius: .5em .5em; /* another rounded corner! */ border-bottom-left-radius: .5em .5em; /* rounded corner! */ border-bottom-right-radius: .5em .5em; /* rounded corner! */ } nav ul li a:hover, nav ul li a:focus { color: black; background-color: black; font-weight: regular; } #header { position: relative; height: 120px; margin-bottom: 20px; z-index: 1000; } #nav { text-align: justify; min-width: 500px; } #nav:after { content: ''; display: inline-block; width: 100%; } #nav li { display: inline-block; } #nav { display: inline; height: 87px; width: 600px; } ul { margin: 30px; padding: 30px; } #content { margin-top: 25px; } list-style: none; margin: 0 20px; padding: 50; display: flex; justify-content: space-around; nav ul { width: 100%; margin: auto; } -
You’re getting there. Still two things you need to fix:
1) There are some stray value/attribute pairs toward the bottom of your code:
list-style: none; margin: 0 20px; padding: 50; display: flex; justify-content: space-around;Either remove that, or add the element you wanted to target with that CSS, and add an opening and closing curly bracket.
2) You’re missing the final closing curly bracket at the very end. A closing bracket is needed to close off this:
@media screen and (min-width: 1220px) {If you’re still having trouble understanding how media queries work, I’d suggest you have a look at our guide to media queries and see if that helps:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/
-
p.s. please wrap your code in code tags using the forum’s toolbar. I’ll fix up your earlier code now to make it easier to read.
-
-
Glad you’re set! I’ll mark this as resolved but if you need help with anything else feel free to start a new thread.
- The topic ‘Adding Media Query to eliminate CSS on devices’ is closed to new replies.
WordPress.com Forums 