Is there a way to position a div containing three font-awesome icons in a responsive design, with one icon on the left, one in the middle, and one on the right using position: absolute/relative?
When I apply position: absolute to the div wrapping the icons, they end up stacking on top of each other.
This is my current approach. However, due to the margin-top: 6vw, it doesn't respond as smoothly when resizing the browser compared to others that use percentages because I'm using position: absolute. How can I rectify this issue?
#canvas {
position: absolute;
bottom: 62%;
left: 35%;
width: 600px;
height: 250px;
margin: 0 auto;
}
#central-skills {
margin: 0 auto;
max-width: 1300px;
margin-top: 15vw;
font-family: 'Roboto Condensed', sans-serif;
user-select: none;
font-weight: bold;
font-size: 2.4rem;
}
.trying {
text-align: center;
}
#website ul {
margin-top: 2rem;
list-style-type: none;
}
#websites li:before {
content: "\2714\0020";
}
#websites {
position: absolute;
top: 50%;
max-width: 100%;
font-size: 0 !important;
}
.trying {
position: absolute;
top: 20%;
left: 35%;
}
.websites {
text-align: center;
position: absolute;
left: 35%;
bottom: 43%;
}
#websites {
position: absolute;
top: 55%;
margin-left: 10rem;
}
#websites ul {
margin-top: 5rem;
}
#websites li {
font-size: 2.4rem;
}
.list-adv {
display: inline-block;
border: 2px solid #77dff1;
padding: 6rem;
margin: 0;
color: #77dff1;
}
.scratch {
padding: 6rem 5.5rem 6rem 5.6rem;
}
.mobile-skills {
visibility: hidden;
}
#icons {
font-size: 10rem;
max-width: 1000px;
margin: 0 auto;
margin-top: 6vw;
}
.fa-html5 {
float: left;
}
.fa-js-square {
position: absolute;
left: 50%;
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.fa-css3-alt {
float: right;
}<head>
<script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
<body>
<div id="central-skills">
<div id="canvas">
<canvas class="canvas"></canvas>
<script src="js/canvas.js"></script>
</div>
<div id="skills" style="display: none;">
<h6 class="trying">Currently I consider myself familiar and comfortable with:</h6>
<h6 class="mobile-skills">html CSS JavaScript jQuery Bootstrap Canvas</h6>
<div id="icons">
<i class="fab fa-html5"></i>
<i class="fab fa-js-square"></i>
<i class="fab fa-css3-alt"></i>
</div>
<div id="websites">
<ul>
<li class="list-adv 1">Responsive</li>
<li class="list-adv 2">Using a clean and easy to follow code</li>
<li class="list-adv 3">Clean and good-looking</li>
<li class="list-adv 4">Optimized for Search Engines (SEO)</li>
<li class="list-adv scratch">Coded from scratch (unless there is a need of a CMS)</li>
</ul>
</div>
</div>
</div>
</body>