CODEWITHSUNDEEP
htmlcssgoogle-chromewebsass
Dhruv Tiwari
Dhruv Tiwari

Reputation: 15

Body, HTML having excessive size

First things first, here is the pen.

HTML

<body>
  <div class="header">
    <img src="https://images.unsplash.com/photo-1586244439413-bc2288941dda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" class="profile-image">
    <p class="name-text">
      Hello👋🏼 <span class="IGHandle">| @something</span>
    </p>
    <div class="description">
      <p>Nothing here... so lorem ipsum</p>
    </div>
  </div>
  <div id="other-links">
   
  </div>
  <div id="social--main">
    <script type="text/javascript" src="js/addSocialItem.js" charset="utf-8"></script>
  </div>
</body>

</html>

SCSS

body {
  overflow-x: hidden;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;

  &:active,
  &:hover,
  &:visited {
    text-decoration: none;
  }
}

.header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: auto;

  .profile-image {
    z-index: 10;
    height: 175px;
    width: 175px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 20px rgba(#335d2d, 0.2);
  }

  .name-text {
    font-size: 20px;
    font-weight: 700;

    .IGHandle {
      font-weight: 500;
      color: rgba(black, 0.7);
    }
  }

  .description {
    max-width: 300px;
    padding: 10px;
    margin-bottom: 10px;

    p {
      font-size: 16px;
      color: rgba(black, 0.35);
      line-height: 1.4;
    }
  }
}

#social--main {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px 7px;
  padding: 10px;
}

.social-item {
  margin: 7px;
  padding: 10px;
  display: inline-block;
  border-radius: 30%;

  .bx {
    align-self: center;
    font-size: 40px;
    padding: 0;
    margin: 0;
  }
}

#other-links {
  margin-bottom: 20px;
  margin-top: -15px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .other-link {
    font-weight: 600;
    display: block;
    color: #2a3d66;
    position: relative;
    margin-top: 15px;
    width: 270px;
    height: auto;
    padding: 15px;
    font-size: 20px;
    background-color: rgba(#2a3d66, 0.2);
    border-radius: 20px;
  }
}

JS

/*jshint esversion: 6 */

var mainSocialtems = [{
  "name": "dribbble",
  "color": "234, 76, 137",
  "href": "",
  "classes": "bxl-dribbble",
}, {
  "name": "instagram",
  "color": "193,53,132",
  "href": "",
  "classes": "bxl-instagram",
}, {
  "name": "behance",
  "color": "23,105,255",
  "href": "",
  "classes": "bxl-behance",
}, {
  "name": "linkedin",
  "color": "0,119,181",
  "href": "",
  "classes": "bxl-linkedin",
},];

var socialMain = document.getElementById('social--main');

for (var i = 0; i < mainSocialtems.length; i++) {
  const linkContainer = document.createElement('a');
  linkContainer.setAttribute('class', 'social-item');
  linkContainer.setAttribute('href', mainSocialtems[i].href);
  linkContainer.setAttribute('style', "background-color: rgba(" + mainSocialtems[i].color + ", 0.08)");

  const link = document.createElement('i');
  link.setAttribute('class', 'bx ' + mainSocialtems[i].classes);
  link.style.color = `rgb(${mainSocialtems[i].color})`;
  linkContainer.appendChild(link);

  socialMain.appendChild(linkContainer);
}

var linkItems = [{
  "name": "2020 so far",
  "color": "207,117,0",
  "href": "",
}, {
  "name": "event update",
  "color": "106,25,125",
  "href": "",
},];

var linkBox = document.getElementById('other-links');

for (var i = 0; i < linkItems.length; i++) {
  const linkContainer = document.createElement('a');
  linkContainer.setAttribute('class', 'other-link');
  linkContainer.setAttribute('href', linkItems[i].href);
  linkContainer.setAttribute('style', "background-color: rgba(" + linkItems[i].color + ", 0.2); color: rgb(" + linkItems[i].color + ")");

  linkContainer.innerText = linkItems[i].name + " ";

  const linkIcon = document.createElement('i');
  linkIcon.setAttribute('class', 'bx bx-link-external');
  linkContainer.appendChild(linkIcon);

  linkBox.appendChild(linkContainer);
}

So the page is working normally on a desktop, but whenever I open it in mobile viewport, it does something weird, the body has a lot of excessive size and though all units are in px, the size of elements is decreasing.

this is what I am saying

Never encountered anything like this before, and can't find what is causing this.

Please help!

Thanks

Upvotes: 1

Views: 169

Answers (1)

Neo Genesis
Neo Genesis

Reputation: 990

first-thing-first, let's make sure you have meta viewport on your head.

<meta
  name="viewport"
  content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"
/>

Second, update your body height to min-height.
This allows the user to be able to scroll on the content if the content is more than the available viewport. 😊

body {
  overflow-x: hidden;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}
...

Upvotes: 1

Related Questions