CODEWITHSUNDEEP
htmlcss
Splekke
Splekke

Reputation: 81

Specific font size for small mobile not working

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

Answers (4)

wjwtheone
wjwtheone

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

Alexander
Alexander

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

dom_ahdigital
dom_ahdigital

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

Umar Waliyullah
Umar Waliyullah

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

Related Questions