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
Related
Goal: See the h1 font-size resize when it hits the 375px screen size.
What is actually happening is that it is applying the styles for the size 1303px screen.
It's crossing out the media query that would actually apply at that screen size (375px)...
What I've tried:
checked that I have this in the html <meta name="viewport" content="width=device-width, initial-scale=1.0">
tried min-width and tried to change values
h1 {
padding-bottom: 61px;
font-family: $h1;
font-weight: 700;
font-size: 55px;
letter-spacing: -0.45px;
line-height: 50px;
color: $primary-color-grey;
width: 428px;
position: absolute;
left: 0px;
#media screen and (max-width: 375px) {
font-size: 20px;
width: 660px;
line-height: 65px;
}
#media screen and (max-width: 816px) {
font-size: 55px;
width: 660px;
line-height: 65px;
}
#media screen and (max-width: 1303px) {
font-size: 60px;
width: 660px;
line-height: 65px;
}
}
It is normal to apply the 1303px media because to tell that it is max-width, it is mean that all the smaller screens will apply the style in addition to that it has come to the last style. So it will override all previous styles.
"szulbix" solution is very good for your case.
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;
I would like to please clarify a doubt. Regardless of the resolution, I am unable to modify the font-size of the body and html tag. I'm trying to change the texts of my page using rem (I understand that this measure is based on the html or body tag, I'm not sure). if I use rem, it would simply be enough to modify the size of the font-size in the mentioned tags, and so my content would change in size. I am right? or what is the best practice? thank you very much.
html, body{
font-size: 12px;
}
#media (min-width: 576px) {
html, body{
font-size: 12px;
}
}
#media (min-width: 768px) {
html, body{
font-size: 13px;
}
}
#media (min-width: 992px) {
html, body{
font-size: 14px !important;
}
}
#media (min-width: 1200px) {
html, body{
font-size: 15px !important;
}
}
https://jsfiddle.net/a0s4qt8w/
This is correct, but you only need to modify the font-size of <html> to have rem units work as you wish. Modifying <body> will complicate things.
My webpage uses multiple sections. I have the .header section set to 1050px which is perfect for desktop viewing, but when viewed on a mobile device the elements inside overflow into the next section.
How can I seamlessly change the section height for mobile viewing so the elements don' overflow?
Other ideas are welcome as well.
Here is my CSS for the section:
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
height: 1200px;
}
Here's one option for you: http://codepen.io/panchroma/pen/BulnL
I'm using media queries to set different CSS values as the viewport of window width changes. The css is easy to follow and for this to work reliably, you need to include a meta tag similar to the following in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've used min-height instead of heght to control the div sizes, because it's more flexible, for example it will probably give better results if a user has a large font setting.
The break points I've chosen for the media queries viewport widths are for illustration only, customise these to fit the specifics of your design.
Good luck!
CSS
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
min-height: 900px; /* set default height */
transition: all 0.5s ease; /* optional css transition effect */
}
/* For media queries to work on smartphones, be sure to add a meta tag similar to the following
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/
#media (max-width: 480px) {
.header-14-sub {min-height: 300px;}
}
#media (min-width: 481px) and (max-width: 767px) {
.header-14-sub {min-height: 500px;}
}
#media (min-width: 768px) and (max-width: 979px) {
.header-14-sub { min-height: 700px;}
}
#media (min-width: 1200px) {
.header-14-sub {min-height: 1200px;}
}
Site: collecthw.com
When the NavBar is full screen it takes up 100% of the width of the screen and the search bar is in the NavBar.
On Mobile and when you shrink your browser window, it changes. I can't for the life of me figure out where I should be looking to make it not do this.
fletch pointed me to the right direction
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
needs changed to
#media (max-width: 767px) {
body {
padding-right: 0px;
padding-left: 0px;
}