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.
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 */ }
I've got the following two media queries:
#media (max-width: 800px) {
.login{
margin-top: 5%;
}
}
}
#media (max-width: 204px) {
.login{
text-align: center;
margin-right: 0%;
}
}
}
Desktop to mobile
When commenting out the top query the bottom one executes
When applying the bottom query styling in the developer tools it works
I've read this about queries: https://css-tricks.com/logic-in-media-queries/
I must not understand something right.
Looks like you've got one too many closing braces which might be messing things up.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
You have added a extra closing braces. Please remove it.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
i'm currently working to develop a WordPress theme, but when i put the first #media query in the style.css file, just the first one there is not working. All others #media from the second is work fine! the problem is with first one only.
Here i put my current work, there is a problem with coding web standards or something like that on my following code?
#media screen and (max-width: 1200px) {
#content .content-area {
border-top: 1px solid #ddd;
width: 50%;
}
}
#media screen and (max-width: 991px) {
.hfeed{}
#content {
width: 100%;
overflow: auto;
}
.content-area {
padding: 8% 3%;
width: 63%
}
#header-sidebar p.site-description {
font-size: 120%;
}
}
this is just a little part of my work.
When i make a copy of it, it works perfectly, though is the same #media content:
#media screen and (max-width: 1200px) {
#content .content-area {
border-top: 1px solid #ddd;
width: 50%;
}
}
#media screen and (max-width: 1200px) {
#content .content-area {
border-top: 1px solid #ddd;
width: 50%;
}
}
Why?!
For anyone seeing this question, it has been answer in the comments:
"Most likely a syntax error before the code you posted."
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).
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 */
}