Border-radius are not centered aligned,when changing screen size

Question

I've fixed everything into the laptop screen size and everything is centred aligned until I begin to switch over to tablet/mobile screen using dev toolbars the top border-radius is shifted towards the left and the bottom 3 circles are not following properly. I heard that px is not suitable to be used instead you should use rem/em in order to be responsive to any screen size, is that true?

.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/popper.js@1.16.0/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>

Raghav Herugu · Answer 1 · 2020-06-01T17:29:52.020

You can use flex layout:

.container1 {
    max-width: 1000px;
    margin: 0 auto;
    padding:0 auto;
}
.circle1 p {

    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle2 p{
    margin: 0;

    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle3 p {
    margin: 0;

    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;  
    display: flex;
    justify-content: center;
    align-items: center;
}
.navigation ul {
    margin: 0;
    padding: 0;
    text-align: center;
    list-style-type: none;
}

.navigation li {
   
    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;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!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 circle">
                <a href="#"> <li><span class="fa fa-gamepad fa-9x"></span></li> </a>
                <p> Circle1</p>
            </div>

            <div class="circle2 circle">
                <a href="#"> <li><span class= " fa fa-thumbs-up fa-10x"></span></li></a>
                <p> Circle2 </p> 
            </div>

            <div class="circle3 circle">
                <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/popper.js@1.16.0/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>

Hi, the bottom 3 circles are aligned but the top circle is not in place after switching to different screen size. — , Jun 01 '20 at 06:52
Hi, I would like the top circle to be in the middle while at the same time after switching to different screen size, it responds to the screen size and reminds in the center of the adjusted size. For example, right now inspect>Toggle toolbar> 700 width and default height. the top circle does not respond well to the adjustable of the screen size. — , Jun 01 '20 at 17:43

score 0 · Answer 2 · answered May 31 '20 at 18:52

You should always avoid using a fixed px in css, instead, em or rem which are relative units are always preferred.

The semantic HTML elements are not used as intended here - the text in the circle should not be contained within a list.

It is easier to position in the center by making the circle element a flexbox and using justify-content:center and align-items:center

Border-radius are not centered aligned,when changing screen size

2 Answers2