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.
This issue is new to me and I'm struggling to identify the cause.
Any assistance would be greatly appreciated!
Thank you