For some reason my h1 and h4 font-size does not change with media query. Everything else does (p, img, ul and li etc).
<h1 class="text_t">
My Name
</h1>
<hr>
<div class="text_c" style="text-align:center">
<h4>Title</h4>
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12"><img src="files/2.jpg"></div>
<div class="col-md-7 col-sm-7 col-xs-12">
<h1>Details</h1>
<ul>
<li><strong>Name</strong>: My name Wongsajjathiti</li>
<li><strong>Age</strong>: My age</li>
<li><strong>Education</strong>: My Edu</li>
<li><strong>Nationality</strong>: My nat</li>
</ul>
</div>
</div>
</div>
Here is my media query:
/*
* Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-device-width : 480px) {
h1 {font-size: 1em}
h4 {font-size:0.7em;}
p {font-size: 0.3em;}
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
h1 {font-size: 1em}
h4 {font-size:0.7em;}
p {font-size: 0.3em;}
}
@media only screen and (max-width: 700px) {
h1 {font-size: 1em; }
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1224px) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}}
.icon {margin-top: -30px;}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
h1 {font-size: 2em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
.icon {margin-top: 100px;}
/* Styles */
}
@media only screen and (min-width : 724px) and (max-width: 1260px){
h1 {font-size:5em}
h4 {font-size:1em}
p {font-size: 1em}
.intro li {font-size: 1em;}
.icon {margin-top: 90px;}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
.icon {margin-top: 300px;}
p {font-size: 5em;}
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles *//* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
When changing the size of my desktop browser everything else readjusts accordingly, but not all the h's. Also, for some reason, I cannot change css properties of my h1 using h1 {font-family (for example) }, but only using .text_t{font-family}.
What is going on? Please help.
Thank you
I think you would be better off simplifying your @media queries:
https://jsfiddle.net/sheriffderek/4s76bf8t/
h1 {
font-size: 1rem;
}
@media (min-width: 400px) {
h1 {
font-size: 1.3rem;
}
}
@media (min-width: 600px) {
h1 {
font-size: 1.6rem;
}
}
@media (min-width: 800px) {
h1 {
font-size: 1.9rem;
}
}
@media (min-width: 1000px) {
h1 {
font-size: 2.2rem;
}
}
Hopefully this helps to show that the rules overlap many places.