Reputation: 81
can anyone help me? It seems that the specific font size for small devices (max 320px) is not working. Can anybody help? I also included the HTML & CSS.
My code:
@media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome" style="font-size:1.8vw; float:left; margin-left:4.5%; color:#black">Random text<br/> & random text</div>
<div id="titleHome2" style="font-size:1.1vw; float:left; margin-top: 4.8%; color:black">
Random Text
</div>
</div>
Upvotes: 0
Views: 209
Reputation: 33
<div class="home-caption">
<div id = "titleHome" class="titleHome">Random text<br/> & random text</div>
<div id = "titleHome2" class="titleHome2">Random Text</div>
</div>
Css
.titleHome {
font-size:1.8vw;
margin-left:4.5%;
}
.titleHome2 {
font-size:1.1vw;
margin-top: 4.8%;
}
.titleHome, .titleHome2 {
color:#FFFFFF"
float:left;
@media all and (max-width: 320px){
font-size: 4vw;
}
}
Hope this helps
Upvotes: 0
Reputation: 161
Try to add !important to the end of the font size
@media all and (max-width: 320px){
#titleHome {
font-size: 4vw !important;
}
#titleHome2{
font-size: 2vw !important;
}
Upvotes: 0
Reputation: 1679
You should move your inline styles out of the HTML and into the CSS.
#titleHome {
font-size: 1.8vw;
float: left;
margin-left: 4.5%;
color: #000;
}
#titleHome2 {
font-size: 1.1vw;
float: left;
margin-top: 4.8%;
color: #000
}
@media all and (max-width: 320px) {
#titleHome {
font-size: 4vw;
}
#titleHome2 {
font-size: 2vw;
}
}
<div class="home-caption">
<div id="titleHome">Random text<br/> & random text</div>
<div id="titleHome2">
Random Text
</div>
</div>
Upvotes: 1
Reputation: 529
This is because the font size defined inline on the HTML will take precedence over the one defined in the stylesheet. Please move all your styles to the stylesheet.
Upvotes: 3