After ensuring that everything on the laptop screen is centered and aligned properly, I encountered an issue when switching to tablet/mobile screen using dev toolbars. The top border-radius seemed shifted towards the left and the bottom 3 circles were not following correctly. I've heard that using px is not the best option for responsiveness and that rem/em should be used instead. Is this information accurate?
.container1 {
max-width: 1000px;
margin: 0 auto;
padding:0 auto;
}
.circle1 p {
position: absolute;
transform: translate(60px, 80px);
font-weight: bold;
font-family: 'Lato';font-size: 28px;
}
.circle2 p{
margin: 0;
position: absolute;
transform: translate(20px,80px);
font-weight: bold;
font-family: 'Lato';font-size: 28px;
}
.circle3 p {
margin: 0;
position: absolute;
transform: translate(50px, 80px);
font-weight: bold;
font-family: 'Lato';font-size: 28px;
}
.navigation {
position:relative;
border: 2px solid rgb(211,211,211);
width: 300px;
margin:100px 50px 80px 350px;
border-radius: 100%;
height: 300px;
background: white;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
}
.navigation li {
padding:10px 80px 0px 68px;
font-weight: 100;
letter-spacing: 2px;
font-size: 35px;
font-family: 'Roboto', sans-serif;
}
.circle1{
margin: 0 auto;
position: relative;
transform: translate(150px, 0px);
border: 2px solid rgb(211,211,211);
width: 210px;
border-radius: 100%;
height: 200px;
background:rgb(211,211,211);
}
.circle2{
margin: 0 auto;
position: relative;
transform: translate(0px);
border: 2px solid rgb(211,211,211);
width: 210px;
border-radius: 100%;
height: 200px;
background:rgb(211,211,211);
}
.circle3{
margin: 0 auto;
position: relative;
transform: translate(-150px, 0px);
border: 2px solid rgb(211,211,211);
width: 210px;
border-radius: 100%;
height: 200px;
background:rgb(211,211,211);
}
.border-circle li{
list-style-type: none;
text-decoration: none;
}
.border-circle{
min-width: 1349px;
width: 100%;
top: 70%;
display: flex;
}
.fa-10x{
opacity: 0.3;
font-size:7em !important;
transform: translate(50px, 30px);
position: relative;
text-decoration: none;
color: inherit;
}
.fa-9x{
position: relative;
font-size:7em !important;
transform: translate(40px, 30px);
opacity: 0.3;
color: inherit;
text-decoration: none;
}
.fa-8x{
position: relative;
font-size:7em !important;
transform: translate(50px, 30px);
opacity: 0.3;
color: inherit;
text-decoration: none;
}
a {
color: inherit;
} <!DOCTYPE html>
<html>
<jsp:include page="../head.html" />
<body style="height: 130vh;">
<!-- navigation bar -->
<div class="container1">
<nav class="navigation">
<ul>
<br></br>
<li style="font-size:80px">Circle</li>
<li>in</li>
</ul>
</nav>
</div>
<div class="border-circle">
<div class="circle1">
<a href="#"> <li><span class="fa fa-gamepad fa-9x"></span></li> </a>
<p> Circle1</p>
</div>
<div class="circle2">
<a href="#"> <li><span class= " fa fa-thumbs-up fa-10x"></span></li></a>
<p> Circle2 </p>
</div>
<div class="circle3">
<a href="#"><li><span class="fa fa-gift fa-8x"></span></li></a>
<p> Circle3 </p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f6e9f6f6e3f4a8ecf5c6b7a8b7b0a8b6">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>