This question already has answers here:
Why media queries has less priority than no media queries css
(2 answers)
Closed last year.
In the media query I aske to position nav bar at the bottom and remove the margin-lef of the main section.
The media query make the job for the nav bar but not for the margin-left.
https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000
What’s wrong. ?
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
You simply have to put the media-query at the end of the CSS.
You default styling for #main-doc comes after the media-query, so overrides it.
It should look like this:
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
position: static;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
As you define the #main-doc {margin-left: 290px;} after the #media query it overwrites the media. if you open your browser developer console you can see the #media appears in smaller sizes but does not take effects. so you can just move the #main-doc {margin-left: 290px;} before #media or use the !important keyword to tell the browse 'whenever this media appears its more important. It's a best practice not to use !important too much cuz it can overwrite and cuz damage somewhere else.
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
OR
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px !important;
}
}
#main-doc {
margin-left: 290px;
}
Related
I am trying to move a shortcode which I put in Wordpress header. The problem is that from the 2 css rules below only the first works. If I change the order then again only the first works.
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
.navigation-wrap{
padding-top: 60px;
} #media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
if you want the "Navigation-wrap" class to be part of the first media query:
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
.navigation-wrap{
padding-top: 60px;
}
} <-- this was missing!
#media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
}
if "navigation-wrap" should be independent from your media querys:
#media only screen and (max-width: 1024px) {
.right-header-wrap-flags {
position: absolute;
top: 25px;
left: 22px;
}
} <-- this was missing!
.navigation-wrap{
padding-top: 60px;
}
#media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px;
top: 50px;
}
}
reason: You forgot the bracket, which basically meant that the second media query was aprt of your first, so it could never occur! When your screen size reached 1025px the first media query is not active anymore and the second one was inside of the first one, so it also couldnt happen anymore. That should fix it
Yes , Only the first CSS code works, you should use javascript, to change the styles based on the Conditions you specify .
So I am at the beginning, doing different tutorials and challenging myself with conquering the fundamentals. I know this might seem lowkey for most people but be gentle, i'm sorta new to this.
I tried using Media Queries 4 for example #media (30em <= width <= 50em ) { ... } but it jsut doesn't work for me (browser compatibility is checked btw) so I went with a classic code writing (which you may see below). Unfortunately my divs will not scale properly, I am clearly missing something like a parent-child not sharing the proper settings but I can't see it. Could you point out my mistake please? All it needs to do is scale the divs if the width is lower than 600, between 601 and 960 and above 961 (obv .px)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
#media only screen and (max-width: 600px) {
body {
background-color: #F09A9D;
}
}
/* Tablet Styles */
#media only screen and (min-width: 601px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
The html is just a bunch of divs with an img src inside them. The output is the same no matter what the size of the browser window is.
#sbrrk is right. And also, you should write your media queries at the very bottom, so they will override other rules of the same specificity
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
I'm getting really frustrated by this...
MDN example media query:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
My media query:
#media (max-width: 1000px) {
.nav-content {
width: 90%;
margin-left: 5%;
}
}
It's not working...
Things I have checked for:
Query is after original .nav-content declaration
The class is the right name
Spelling is correct
The original CSS
.nav-content {
width: 80%;
margin-left: 10%;
display: inline-block;
}
Here's a link to a codepen: http://codepen.io/sbhenrichs/pen/ZOjyrm
But when I shrink the browser down to less than 1000px, nothing is happening!
PLEASE HELP
You have this CSS rule in a style tag inside your (HTML) head:
.nav-content {
width: 75%;
margin-left: 12.5%;
}
This overwrites the rules in all external style sheets...
How do I make columns wrap EVEN at 1024px? Because, (# 1024px) the page IS responsive, but the "stretchiness" is ugly.
At a basic level, you can mimic the Bootstrap method:
//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
#media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Make all grid-sized elements block level again
[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
}
Which of course is LESS CSS. This is the compiled LESS:
[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
And here is a small snippet that begins the task of replicating this:
#media all and (min-width: 1000px) {
[class*="span"], .row-fluid [class*="span"] {
width: 100%;
}
}
http://jsfiddle.net/userdude/ZJJFJ/1/
There's also a responsive CSS file for greater than 1200px, which may also be helpful. If you do this with LESS, I'm sure it will be simpler as well, instead of pure CSS.