Simple html not phone responsive, can't figure out why

user_14379316 0
Viewed 53

I have this very simple web that I developed. I used all the codingand tips provided in similar questions here but with no luck. The web runs ok and its validated, but divs do not resize to fit phones. Can anybody give it a quick look and give me some pointers? much appreciated.

Here is the HTML code:

@import url(//db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light);

@font-face {
  font-family: "Adieu Light";
  src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot");
  src: url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.woff") format("woff"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/03af38e6d90add293d43f1ef74ce755f.svg#Adieu Light") format("svg"); 
}

.body, html {

    height: 100%;
  margin: 0;
  background-image: url("Home-bck.jpg");
  background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.full {
    padding: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%)


}
.tromper {
    display: flex;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 0px;
    color: #686868;
    font-family: adieu light;
    font-size: 28px;
}
.better {
    display: flex;
    justify-content: center;
    margin-top: -39px;
    color: #707070;
    font-family: Adieu light;
} 
.social ul {
    display: flex;
    position: absolute;
    justify-content: center;
    right: 50%;
    left: 44%;
    list-style: none;
}
.social ul li {
    margin-top: 0;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 30px;
}
.social ul li .fa {
  font-size: 70px;
  line-height: 60px;
  color: #626262;
  }

.social ul li .fa-instagram:hover {
  color: #bfeefd; 
  transition: .5s;
  transform: translate(0, -10px) rotate(360deg); 
}

.social ul li .fa-linkedin:hover {
  color: #bfeefd; 
  transition: .5s;
  transform: translate(0, -10px) rotate(360deg);

}
.Contact {
    display: flex;
    justify-content: center;
    margin-top: 70px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    color: #626262;
    font-family: Adieu Light;
    font-size: 24px;
        }

.clients {

   display: flex;
    justify-content: center;

}

/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: auto; 

}

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
html { font-size:100%; }

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} }
 <!DOCTYPE html>
    <html>
        <head>
            <style></style>
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="HandheldFriendly" content="true">
        <meta charset="utf-8">
        <title>Tromper&amp;Tromper</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link href="https://db.onlinewebfonts.com/c/03af38e6d90add293d43f1ef74ce755f?family=Adieu+Light" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <div class="full container">
          <div class="tromper">
            <h1>TROMPER&amp;TROMPER</h1>
          </div>
          <div class="better">
            <h3>"BETTER TOGETHER"</h3>
          </div>
          <div class="social">
            <ul>
              <li>
                <a href="https://www.instagram.com/tromperandtromper/?hl=es" target="_blank">
                  <i class="fa fa-instagram"></i>
                </a>
              </li>
              <li>
                <a href="https://www.linkedin.com/company/tromper-and-tromper-works" target="_blank">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <a href="mailto:whatever@whatever.com" style="text-decoration:none" target="_blank">
            <div class="Contact">
              <h4>CONTACT US</h4>
            </div>
          </a>
          <div class="clients"></div>
        </div>
      </body>
    </html>

responsive css html
3 Answers

The reason of your div is not resizable it's because h1 tag. You can try modify your css file with this:

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
    h1 {font-size: 7vw;} /* <- HERE */
}

However, your code isn't semantic. Try to improve this with the time.

user_139725930

I would comment as I am not sure if this is the right answer, but unfortunetly I am not allowed to.

I don't want to offend you or your experience level but it seems like you do not know how css works? Or maybe you just copied without looking.

You use the media queries to make the website responsive pretty much. Depending on your needs of course. The easiest way to make divs respeonsive is giving them a width with %. So if you give them lets say 90% they will only get 900px wide when the screen (or window) is 1000px etc.

When you use media queries, because maybe the divs need to be smaller or bigger or you use absolute numbers (like pixel or so) you also need to use your classes and IDs.

Right now in your media queries I see two IDs "primary" and "secondary" because with # you declare this is an ID and in your HTML I dont see any IDs at all. So how is the browser supposed to know, where to apply your CSS?

Now, I dont claim to be a professional CSS user, so it is possible that "#primary" is some sort of special command, but as of right now, I would say there is at least one of your problems.

You also use alot of flex and I dont really know why? You could also work a bit on your HTML, using containers, sections, articles and such, but thats another story.

user_101926790

i agree with bibleblade, and i would like to add that its pretty weird that you use "screen" and sometimes just dont add it. maybe try to be a bit more consistent with that. and plus, by adding "screen" youre stating that this will only look like this, if its on a screen, so it wont work on a printer, which is pretty unnecessary, so i would just remove the "screen" so it defaults to "all" and the last media queries at the bottom for the font-size. are unnecessary, since you could just make the font-size relative to the screen via vw or vh or just use something like clamp

user_138641450
Related