Only the second #media tag is applied to my css, and when using chrome dev tools the it only shows the second one in the css tag.
#media screen
and (max-device-width: 600px)
and (min-device-width: 0px)
{
#navLink {
font-size: 1.6em;
}
}
#media screen
and (max-device-width: 2000px)
and (min-device-width: 600px)
{
#navLink {
font-size: 35px;
}
}
Related
I am running a small website on Joomla and cannot get the responsiveness to work. I am running media queries for the screen sizes and making adjustments as needed, but cannot get them to adjust for anything under 760px wide.
I've checked all four of my media queries and cannot find a solution. I'm sure it's something simple, but I cannot find it. I do
/* Note: Design for a width of 768px */
#media (min-width: 768px) and (max-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px;
}}
/* Note: Design for a width of 480px */
#media (min-width: 480px) and (max-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px;
}}
/* Note: Design for a width of 320px */
#media (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}}
I expect the main DIV to scale for 768px, 480px and 320px, but cannot get it to scale properly.
The website is located at:
https://crafted-development.com
My Css is located at:
https://www.crafted-development.com/templates/jf_calla-exteriors/css/template.css
You need to close the media tag also at the end with "}"
Also, instead of media, try adding "#media only screen and"
Example::
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
Also, the meta tag is necessary
<meta name="viewport" content="width=device-width, initial-scale=1">
Use this css
#media only screen and (min-device-width: 768px) and (max-device-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px !important;
}
}
#media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px !important;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 479px)
{
.main, #jf-footer .main-inner1 {
width: 316px !important;
}
}
This turned out to be the solution: Thank you guys!
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
My font for my headers is 60px and I am trying to reformat to be able to shrink or make it responsive for mobile so the words are not cut off in the middle of the word.
Thanks very much!
This is the code:
h1 {
font-size: 4.286em; /* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
/* Portrait and Landscape */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
You are close, just add the h1 changes inside each media query, and also you are missing a closing tag on your original h1 style.
h1 {
font-size: 4.286em; /* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
}
/* Portrait and Landscape */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
h1 {
font-size: 4em; /* a little smaller*/
}
}
/* Portrait */
#media only screen
and (min-device-width: 240px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
h1 {
font-size: 3.5em; /* a little smaller*/
}
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
h1 {
font-size: 3em; /* a little smaller*/
}
}
What I have done is actually make markup using the same media queries you used and just made different background colors for you to know that they all are working. the css below will show you which screen will show which color background based on the screen sizes:
/*This will be anything thats not mobile. it will show a green background*/
body {
background: green;
}
h1 {
font-size: 4.286em;
/* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
color: #fff;
}
/* Portrait - portrait devices will be purple based on your dimension*/
#media only screen and (min-device-width: 240px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
body {
background: red;
}
h1 {
font-size: 4.286em;
/* 60px */
margin-bottom: 24px;
width: auto;
text-align: center;
}
}
/* Landscape - landscape devices will be purple based on your dimension*/
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
body {
background: purple;
}
h1 {
font-size: 4.286em;
margin-bottom: 24px;
width: auto;
text-align: center;
}
}
The HTML I used for this test:
<h1>This Is a Heading Tag</h1>
Note that you might need to change the demensions a little to make it work for all becuase i noticed that some phones have larger screens than the size you used. e.g- my huawei landscape falls back to green while my iphone 4s landscape falls back to purple but this is just us showing you that your code should work.
What you need to do to emulate is open chrome and the developer tools F12 and you will see when the console opens, on the top left you will see a phone icon, click on that and then your screen will change. you see the drop down of the phones on the top left? choose the phone and the checkbox next to it to get the landscape mode to see the different variations i mentioned ealier.
Hope this clears, i will gladly help if you need more help. Link to a place i hosted your code update - http://coreb.co.za/lab/design/mediaQueries/
Remember that in essence this style should make anything that's not a mobile landscape or portrait green based on your demensions and then if the demensions are met then you should be able to see the iphone 4 is red and is correct and landscape purple, you just need to make the correct sizes as i mentioned earlier but I'm here to help if need be
Good Luck
currently working on a temp page for a restaurant as seen at: mattt.co/ok-rm/iddu. I've set up a number of #media breakpoints for large-to-small desktop screens as well as for mobile.
The queries seem to work fine, however, one specific query is not functioning properly, and that is the '.footer1 a, footer2 a' styles in the iPhone landscape view — query as follows:
#media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape)
As it stands, when viewed in landscape mode the site displays as follows on the iPhone: Image.
This is an error, as the scale of the footer text (phone no., e-mail, etc.) should be displayed as follows (seen through Chrome's iPhone emulator): Image.
I'm not sure why all other elements seem to be scaling correctly at their respective breakpoints, but the ".footer1 a", and ".footer2 a" styles are not appearing as intended specifically on the landscape view for the iPhone.
I've attached the relevant code below.
<meta name="viewport" content="width=device-width, initial-scale=1" />
.footer1 a, .footer2 a {
font-family: pitch;
display: block;
font-size: 30px;
line-height: 40px;
letter-spacing: 1px;
}
#media only screen and (min-width: 1400px) and (max-width: 1599px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 25px;
line-height: 35px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1399px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 20px;
line-height: 30px;
}
}
#media only screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 20px;
line-height: 30px;
}
}
#media only screen and (max-width: 1024px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 15px;
line-height: 20px;
}
}
#media only screen and (min-width : 569px) and (max-width: 1024px) and (orientation: portrait) {
.footer1 a, .footer2 a {
font-size: 28px;
line-height: 36px;
}
}
#media only screen and (min-device-width : 569px) and (max-device-width: 1024px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 20px;
line-height: 30px;
}
}
#media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: portrait) {
.footer1 a, .footer2 a {
font-size: 15px;
line-height: 20px;
}
}
#media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 15px;
line-height: 20px;
}
}
If anyone could take a look that would be greatly appreciated! I can't figure out where I've gone wrong, even when using Safari's iPhone developer tool to inspect element, the listed style is turning up correctly.
Many Thanks!
You probably need to add html {-webkit-text-size-adjust:100%;} to stop iOS from automatically scaling up fonts it thinks are too small.
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
I am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.