I made an HTML page and a CSS file. I created media queries to display this page correctly on different devices.
Everything is fine except on a Samsung A51 (android). This mobile interpret the CSS media query for resolution > 1000 pixels rather than interpret the media query for resolution = 414px.
As you can see on this website, Samsung A51 have a resolution 1080x2400 and 405PPI: https://phonesdata.com/fr/smartphones/samsung/galaxy-a51-5458463/#techspec
I don't understand why. However i clearly indicate the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Here is the CSS interpreted:
h3 {
max-width: 70%;
text-align: center;
font-weight: 800;
color: #13A538;
margin: 5rem auto 1rem;
font-size: 2.5rem;
margin-bottom: 30px;
}
Here is the media querie that should be interpreted:
#media screen and (min-width: 414px) {
h3{
font-weight: 500;
/* color: #13A538; */
color: pink;
margin: 2rem auto 1rem;
font-size: 1.5rem;
}
EDIT: My break points:
#media screen and (max-width: 360px)
#media screen and (min-width: 414px)
#media (min-width: 576px)
#media (min-width: 768px)
#media (min-width: 992px)
#media (min-width: 1200px)
#Greg-- you think it's necessary to add you media querie ?
Samsung A51 has viewport size 412x915px, change you media querie to:
#media screen and (min-width:320px) {
h3{
font-weight: 500;
/* color: #13A538; */
color: pink;
margin: 2rem auto 1rem;
font-size: 1.5rem;
}
}
320px - is min almost all devices, but better use max-width
How can you calculate viewport:
Samsung A51 resolution: 1080x2400px
Density: 2.625 (resolution 405px/inch to viewport 154px/inch)
viewport:
width: 1080/2.625=411,4px
height: 2400/2.625 = 914.2px
UPD
This Samsung stil display this media queries: #media (min-width:
1200px)
Please check and check on your Samsung
Please try to check on different mobile browsers (Samsung browser and Chrome) - does it have same issue?
For detect mobile device you can use:
#media only screen and (hover: none) and (pointer: coarse) - for detect touch sreens link;
orientation: portrait - link;
Related
I am using media queries to change the font size of some text on my site. However it is not working as I understand them to work.
p {
font-size: 3rem;
#media (min-width: 768px) {
font-size: 2rem;
}
#media (min-width: 992px) {
font-size: 1.5rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}
Currently the min-width: 768px applies to everything under 992px. For example at 440px width it still has a font size of 2rem. The 3rem font size is never used. One interesting thing to note is that this is only happening in Chromes Responsive device tester. If I make the actual window small then it works.
Since you're going mobile first (using min-width) you are supposed to apply lowest size first.
Try with:
p {
font-size: 1.5rem;
#media (min-width: 768px) {
font-size: 2rem;
}
#media (min-width: 992px) {
font-size: 3rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}
make sure you include in your <head> this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
Source: Css tricks
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) { ... }
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.