So im just testing some media queries for scss in my webpack project.
I've just got a simple div within the body, and want the background to change depending on the width of the screen.
My two smallest media queries, small & xsmall, just don't apply, and I can't figure out why.
No matter how narrow I make the screen, the background stays green below 900px
$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
.test-class {
width: 100%;
height: 100%;
#media (min-width: $xsmall) { <--- Doesn't Apply
background-color: purple;
}
#media (min-width: $small) { <--- Doesn't Apply
background-color: pink;
}
#media (min-width: $medium) {
background-color: green;
}
#media (min-width: $large) {
background-color: yellow;
}
#media (min-width: $xlarge) {
background-color: blue;
}
#media (min-width: $xxlarge) {
background-color: orange;
}
}
}
Sorted it.
Was using a generic HTML boilerplate and not the full one provided by VSCode.
Added:
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and that resolved it.
Related
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 have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
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;
}
}
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}
I have a blog template which I'm making responsive, how can i change the background of the body at smaller resolutions, I'm trying the following but it doesn't work.
#media (max-width: 30em) {
.post-template {
background-color: #color_01;
}
}
my body has the class
<body class="post-template">
The MixIn which applies the body color styling is as follows
.BodyColor () {
background-color: #color_01;
background-image: url(../images/body.jpg);
color: #color_05;
overflow-x: hidden;
background-attachment: fixed;
&:after {
content: ' ';
width: 100%;
height: 50%;
background-color: darken(#color_01, 10%);
.transform(~"skew(-20deg) rotate(-20deg)");
left: 0;
top: 30%;
.opacity(0.5);
position: fixed;
}
}
I want to overwrite the .transform call, so there isn't a skew on smaller resolutions as it renders too slowly
however I've set some properties of the body:afterpseudo class which I want to overwrite at smaller resolutions.
#media screen and (min-width: 30em) {
.post-template {
background-color: #big_size_color;
}
.post-template:after {
yourcode...
}
}
#media screen and (max-width: 30em) {
.post-template {
background-color: #color_01;
}
}
This keeps the body:after code from being shown unless the page is bigger than 30em. This rule applies to anything you want to only work on higher resolutions and be "overridden" on smaller ones. Don't declare it by itself outside of the #media call.