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.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I am trying to use CSS to style the mobile responsive Webpage. When I resize chrome to 360px, the styles shows its detecting 432px.
When chrome is reduced to 320px, the content inside the li, div is empty.
<meta name="viewport" content="width=device-width,initial-scale=1" />
is added to the header section of the webpage
//media query for mobile responsiveness
#media only screen and (max-width: 320px) {
.header {
min-width: 100%;
margin: 0px;
text-align: left;
font-size: 10px;
font-weight: bold;
display: flex;
flex-direction: row;
// border: 1px solid red;
}
.container li div {
padding: 5px 75px;
margin: 0px;
text-align: center;
//border: 1px solid blue;
}
}
//code continues with different break points
#media only screen and (max-width: 432px) {
.header {
min-width: 100%;
margin: 0px;
text-align: left;
font-size: 10px;
font-weight: bold;
display: flex;
flex-direction: row;
}
.container li div {
padding: 5px 25px;
margin: 3px;
text-align: center;
width: 90%;
height: 100%;
font-size: 16px;
//border: 1px solid blue;
}
}
GIF indicating a 360px detected as 432px
CSS max-width: 432px will effect any screen size under or equal to 432px. Screen size 360px is less than 432px therefore this rule will be applied.
CSS is Cascading so the latest rule will overwrite any earlier rules.
If this is the last CSS then it will overwrite any values previously set by - for example - #media only screen and (max-width: 320px){ ...}
The way to solve this is to set your CSS in order so that the largest CSS is at the top, and the smallest width set is at the bottom:
#media only screen and (max-width: 720px) {
...
}
#media only screen and (max-width: 640px) {
...
}
#media only screen and (max-width: 480px) {
...
}
#media only screen and (max-width: 360px) {
...
}
If you decide to use min-width instead of max-width then obviously reverse the order of these media styles. The point is that the CSS will apply every style that fits the criteria and the last one is the one that sticks!. So The last one should be the final correct one; in this case
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 fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
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 have problem with the fixed div box with different screen size, the box is look perfect when the resolution is in 1366*768, but if the screen goes to bigger or smaller resolution, the box is running out of its position, which is not aligned with the container, as illustrate of the below image.
Could it be properly place and align the box with different screen resolution?
*Note: The div box will shrink to edge when the page is scrolling down.
Fixed div:
<a href="#" data-toggle="modal" data-target="#modalBox">
<div class="adv"><span">Big Hi to World</span></div>
</a>
CSS:
.container {
width: 1054px;
}
.adv {
position: fixed;
top: 12px;
right: 12%;
width: 230px;
height: 56px;
background-color: #348cb2;
text-align: center;
z-index: 9998;
}
.adv:hover {
background-color: #6fc7bb;
}
.adv span {
display: block;
text-transform: uppercase;
letter-spacing: 4px;
font-size: 26px;
font-weight: 300;
color: #fff;
padding: 12px;
line-height: 110%;
}
.adv-ts {
right: 0;
width: 48px;
height: 48px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 1.0;
}
.adv-ts span {
display: none;
}
.adv-ts:after {
content: "Hi";
font-size: 28px;
color: #fff;
padding: 13px 11px;
display: block;
}
Appreciate for solution!
Try using CSS media queries
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
With each screen size change the position of the adv