CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Lord
Lord

Reputation: 153

How to resize html, css on mobile?

I'm creating a countdown to insert into my site. Everything works well on my computer, but when I enter from a mobile device it looks weird (It's displayed on two lines instead of one) and I'm not able to resize it.

So far the code I have is:

    body{
      text-align: left;
      background: #ffffff;
      font-family: sans-serif;
      font-weight: 100;
    }
    
    h1.customclass{
      color: #032g71;
      font-weight: 50;
      font-size: 40px;
      margin: 0px 0px 10px;
    }
    
    #clockdiv{
    	font-family: sans-serif;
    	color: #fff;
    	display: inline-block;
    	font-weight: 100;
    	text-align: center;
    	font-size: 30px;
    }
    
    #clockdiv > div{
    	padding: 10px;
    	border-radius: 3px;
    	background: #055678;
    	display: inline-block;
    }
    
    #clockdiv div > span{
    	padding: 0px;
    	border-radius: 3px;
    	background: #055678;
    	display: inline-block;
    }
    
    .smalltext{
    	padding-top: 5px;
    	font-size: 16px;
    }
 <h1 class="customclass">TEST COUNTDOWN</h1>
    <div id="clockdiv">
      <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
      </div>
      <div>
        <span class="hours"></span>
        <div class="smalltext">Hours</div>
      </div>
      <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
      </div>
      <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
      </div>
    </div>

I'm thinking to use something like,

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

but how can I apply it to my case? Is there a way to resize in my case #clockdiv only when someone enter from a mobile device?

Thanks a lot for your help!!!

Upvotes: 0

Views: 5548

Answers (1)

Johannes
Johannes

Reputation: 67798

Since you don't have any fixed sizes for your DIVs and spans and therefore their size depends on the contents, you can simply use smaller font-sizes and padding settings for your elements in a media query, like 

@media screen and (max-width : 480px) {
  #clockdiv {
     font-size: 18px;
  }
  #clockdiv > div {
     padding: 4px;      
  }
   .smalltext{
     padding-top: 2px;
     font-size: 12px;
  }
}

Upvotes: 1

Related Questions