So, for instance I have:
#headerMain {
position: fixed;
width: 100%;
background: rgba(255,255,255,.9);
z-index: 999999999;
overflow: hidden;
}
I just want to change the position property when going to a mobile:
#media only screen and (max-width: 480px) {
#headerMain {
position: absolute;
}
}
Or do I need to specify all properties?
#media only screen and (max-width: 480px) {
#headerMain {
position: absolute;
width: 100%;
background: rgba(255,255,255,.9);
z-index: 999999999;
overflow: hidden;
}
}
Thank you in advance!!!
Yes, you can simply overwrite a single declaration when using a media query. A simple example:
#headerMain {
background: blue;
color: white;
}
#media only screen and (max-width: 480px) {
#headerMain {
background: red;
}
}
When the viewport is larger than 480px, the text will be white and the background will be blue. When the viewport is smaller than 480px (you can make this happen by just changing the size of your browser window), the background will be red, but the text will remain white.
This is because of the cascading part of CSS. In a less-than-480px-wide viewport, the element inherits both #headerMain declarations, and the more specific media query (#media only screen and (max-width: 480px)) overrides the background-color to make it red.
Related
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've been trying to enlarge the logo of our site when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:
#media (max-width: 360px) {
.header-logo img {
max-width: 50%;
max-height: 50%;
}
}
I'm not sure what to adjust further since Firebug seems to be displaying code for the desktop version. And I don't really want to change anything on desktop view. Just mobile.
Will appreciate any feedback.
You can make the below changes in the css.
.header-logo img {
max-width: 100%;
max-height: auto;
}
Try this out
.header-logo img {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
At max-width of 360px change style property for class .custom-logo-link as below,
#media screen and (max-width : 360px){
.custom-logo-link {
width: 50%;
}
}
You have to specify only width, it will adjust height automatically.
.header-logo img {
width: 100%;
}
This may be a silly question, but are you sure max-width and max-height is what you want to change here? Those parameters just set the upper limit of how tall and wide the element can be.
https://www.w3schools.com/CSSref/pr_dim_max-width.asp
Perhaps try one of these?
#media (max-width: 360px) {
.header-logo img {
width: 50%;
height: 50%;
}
}
or:
#media (max-width: 360px) {
.header-logo img {
transform: scale(0.5);
}
}
I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes
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.