CODEWITHSUNDEEP
cssresponsive-design
aixecador
aixecador

Reputation: 876

Responsive css not working on smartphone but working on resizing browser

I don't get it: I think I have built my css in a resposive way so it's restructures when viewed in a smartphone. It works when resizing browser page. It doesn't when checking on chrome tool developper and my Nexus 5 chrome browser. Website is www.peresola.com/index.html. Css responsive part below:

@media (max-width:700px) {
  body {
    font-size:18px;
    
  }
  
    .menu li {
    display:block;
    text-align:center;
    font-size:18px;
    margin: 5px 0;
  }
  
  p {
    font-size:18px;
    width:75%;
    margin:10px auto;
  }
  
  .personPage {
    height:30%;
    width:30%;
  }
  

  
  .socialIcons li img {
    height:50px;
    padding: 10px;
  }
  
  input {
    padding:5px;
    font-size:15px;
  }
  
  .footer {
    font-size:10px;
  }
}

Note that I moved it from 500 to 700 to test it out today. Can anyone help? Thanks!

Upvotes: 0

Views: 67

Answers (1)

AleshaOleg
AleshaOleg

Reputation: 2211

If you don't have viewport, add this one <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> tag

Upvotes: 2

Related Questions