I have two media queries that have exactly the same .css properties:
#media only screen and (max-width: 320px) {
h2 {
font-size: 3rem;
line-height: 3.5rem;
}
.slider h3 {
font-size: 2.5rem;
line-height: 2.5rem;
}
.col .wrapper {
padding: 3rem;
}
}
#media only screen and (max-width: 480px) {
h2 {
font-size: 3rem;
line-height: 3.5rem;
}
.slider h3 {
font-size: 2.5rem;
line-height: 2.5rem;
}
.col .wrapper {
padding: 3rem;
}
}
What do I have to do to DRY them? I tried:
#media only screen and (max-width: 320px) and (max-width: 480px)
and didn't work. Also tried:
#media only screen and (max-width: 320px), (max-width: 480px)
and didn't work either. Any help? Thanks.
You can just use the latter since they are just the same css and the media query (max-width: 480px) still hits resolutions 320px and below
So you only need this :
#media only screen and (max-width: 480px) {
h2 {
font-size: 3rem;
line-height: 3.5rem;
}
.slider h3 {
font-size: 2.5rem;
line-height: 2.5rem;
}
.col .wrapper {
padding: 3rem;
}
}
since they both contain exactly the same CSS Declarations, what's the point of having both of them?
Just get rid of the #media only screen and (max-width: 320px){...} and you should be fine.
The remaining #media only screen and (max-width: 480px){...} declarations will automatically be applied to all widths up-to 480px (this includes 320px, since 320px < 480px).
Related
I've had no issues with any media queries until I tried creating one for large desktop monitors. For some reason only some of the styles in the large device media query work and some don't. It seems the general styles are overriding only some of the large media query, I just don't know why.
I assumed it was in the wrong order and was being overridden, but no matter where I put it (above general styles, below smallest query, above big query), nothing changes. I then saw a suggestion that it needed more specificity, so I tried doing that as well as !important. Still nothing changes. I've checked for misplaced ; and { } but it's all correct.
These are my media queries in order:
General styles not in media query
/* styles that work */
#media only screen and (min-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
UPDATE: Code sample
PS: Idk who's downvoting everything but it isn't me.
/* General styles that all work */
body {
font-size: 1.8rem;
}
h2{
font-size: 4rem;
}
h3{
font-size: 3rem;
}
.profilePic {
width: 30rem;
height: 30rem;
text-align: center;
border-radius: 50%;
border: var(--primary) 5px solid;
padding: 1%;
}
.typingEffect h1, .typingEffect p {
font-size: 4.5rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
/* Large device media query where some work */
#media only screen and (min-width: 2560px){
body{
font-size: 4rem; /* Works */
}
h2{
font-size: 9rem; /* Works */
}
h3{
font-size: 5rem; /* Works */
}
.profilePic {
width: 100rem; /* Doesn't work */
height: 100rem; /* Doesn't work */
}
.typingEffect h1, .typingEffect p {
font-size: 10.5rem; /* WORKS FOR h1, NOT FOR p */
padding: 5rem; /* WORKS FOR h1, NOT FOR p */
}
}
<header>
<img class="profilePic" src= "./images/orange-Avatar3.svg" alt="Avatar of me"/>
<div class="typingEffect">
<h1 class="name"> Hey, I'm Me</h1>
<p class="tagline"><span className="typed-text"></span><span class="cursor"> </span></p>
</div>
</header>
Ok buddy, I highly recommend going to the Mobile-first design. in order to avoid using max-width. Since order matters and you may end overruling some of the properties you wrote. Check this example out.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: red;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
As you can see every single query is working. But if you swap out the order problems will start to occur therefore you should always be careful when using max-width so you don't end up messing up your code.
Check out this snippet where I messed up the order.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
In the above snippet, the following query didn't even work
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
!! Since the code at the bottom is stronger in CSS you will find out the 750px breakpoint is working since it's at the bottom.
#media only screen and (max-width: 750px)
and it is overruling the breakpoints 600px and 375px since they appeared before the 750px breakpoint which is at the bottom of the CSS file.
#media only screen and (max-width: 600px)
#media only screen and (max-width: 375px)
**
I'm sure that your problem is just a CSS Specificity problem
**
That's why the best approach is to go mobile-first and use min-width since it is easier to care for and maintain. I hope my answer has given you a clear understanding of your problem and why your media were not working.
Use max-width instead of min-width for consistency
#media only screen and (max-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
use min-width instead max-width
when using max-width to this way css media query can't understand your query
When your page is 600px, it is compatible with almost all media queries
bestway:
/* styles that work */
#media only screen and (min-width: 1275px){ /* styles that HALF work */ }
#media only screen and (min-width: 751px){ /* styles that work */ }
#media only screen and (min-width: 601px) { /* styles that work */ }
#media only screen and (min-width: 376px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
Second media querie works fine - (min-width: 601px) and (max-width: 992px) - but the first on just does not work - (max-width: 600px).
Am i missing something? Cause even if i add min-width to first one it still does not work.
.center {
font-size:70px;
color:white;
position: absolute;
height: 50px;
top: 40%;
left: 30%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
text-align: center;
font-family: "Josefin Sans";
font-weight: bold;
}
#media only screen and (max-width: 600px){
body {
background-color: olive;
}
.center{
margin-left:-135px;
font-size:60px;
}
}
#media screen and (min-width: 601px) and (max-width: 992px){
body {
background-color: blue;
}
}
You have some dot in your code remove it (see image)
Here is working one:https://jsfiddle.net/tben7qz8/4/
You can try #media screen and (max-width: 600px) without only
There was a hidden symbol behind the brackets. Noticed that when i posted the code.
I'm currently building a small website including RWD features to enable it to work well on mobile devices.
My media queries seem to work correctly in portrait mode. However, when I rotate the devices the rules don't seem to apply any more.
Portrait Mode (320x480)
Using the code:
#media only screen and (min-width: 320px) and (max-width: 480px)
The same media query renders this in
Landscape Mode (480x320)
As you can probably make out, my media queries adjust the font size depending on the width of the screen. Strangely, the font in the Landscape view does not change even though the media query applies to it too.
The full code of the media queries:
/*................................
MEDIA QUERIES - Phones
..................................*/
#media only screen and (min-width: 320px) and (max-width: 480px) {
/*............................
FONTS
..............................*/
html {
font-size: 70%;
}
p.promo {
line-height: 1.4em;
}
}
/*..............................
LAYOUT
................................*/
.clientLogo {
float: left;
height: 60px;
width: 60px;
margin: 10px 10px 10px 30px;
background: $moondust;
}
/* Phones - Landscape */
/*................................
MEDIA QUERIES - Tablets
..................................*/
#media only screen and (min-width: 481px) and (max-width: 768px) {
/*............................
FONTS
..............................*/
html {
font-size: 85%;
}
p.promo {
line-height: 1.5em;
}
/*.............................
LAYOUT
...............................*/
.clientLogo {
float: left;
height: 80px;
width: 80px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
/*................................
MEDIA QUERIES - Desktops
..................................*/
#media only screen and (min-width: 769px) {
/*............................
FONTS
..............................*/
html {
font-size: 100%;
}
/*...............................
LAYOUT
.................................*/
.clientLogo {
float: left;
height: 120px;
width: 120px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
Have you tried this?
#media (min-width: 480px) and (orientation: landscape) { ... }
I have the following media queries:
#media only screen and (max-width : 320px){
.jumbotron-startup{
min-height: 100vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
}
#media only screen and (min-width : 321px){
.jumbotron-startup{
min-height: 130vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
.sh-portrait{
display: inline-block;
}
#yes-startup{
margin-bottom: 10px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.jumbotron-what-is-switchhon{
min-height: 100vh;
height: auto;
}
.space-top{
margin-top: 0;
}
.jumbotron-what-is-switchhon p{
font-size: 1.2em;
text-align: center !important;
}
.jumbotron-startup img{
height: 64px;
}
.jumbotron-startup p{
font-size: 1.1em;
}
}
For some reason, these media queries, some of their classes are applying to the page on any environment, that means even if the resolution is 1920x1080 from my current monitor in my desktop computer.
I have no idea why this is happening, as it has never happened before. Anyone has any idea as to why they are acting out of context?
Outside of the media queries I'll just put some of the classes I have that for some reason, they are being overwritten:
.startup-card{
background-color: rgba(255, 255, 255, 0.6);
color: #333;
height: 300px;
border-radius: 5px;
}
.startup-card h2{
padding-top: 20px;
}
.startup-card p{
padding: 10px;
text-align: left;
font-size: 1.1em;
}
.startup-card img{
padding-top: 20px;
width: auto;
height: 90px;
}
Just to make sure we're on the same page, these media queries are at the bottom of my stylesheet, like many experts recommend, since sometimes funny things may happen if put somewhere else other than on the bottom.
EDIT
Here's a PEN for you to take a look at it. http://codepen.io/yisera/pen/xdGKh
*****UPDATE******
After commenting the media queries to see where the problem is, I found that all media queries work correctly except this one:
#media only screen and (min-width : 321px){
.jumbotron-startup{
min-height: 130vh;
height: auto;
}
.jumbotron-slide-2 p, .jumbotron-slide-2 h2{
display: none;
}
.startup-card{
height: auto;
background-color: inherit;
}
.sh-portrait{
display: inline-block;
}
#yes-startup{
margin-bottom: 10px;
}
}
I can't figure out why, it has the correct syntax and everything, everything closes correctly, it's driving me nuts
Move all your media queries at the bottom of your CSS. Otherwise the styles you have written inside the media queries will overwritten with the normal styles.
EDIT:
As OP asked in chat, "Do you know how can I elaborate a media query to target just the landscape of a mobile phone?"
/* #### Mobile Phones Portrait #### */
#media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
#media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}