Before we dive in, check out this code pen.
CSS
<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... just some lorem ipsum text</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);
}
Everything looks good on desktop, but when viewed on mobile, the page seems to have excessive space and elements are shrinking despite being set in pixels.
Here's a visual reference
This issue is new to me and I'm struggling to identify the cause.
Any assistance would be greatly appreciated!
Thank you