border-radius circle isn't sliding to the middle of the screen

Question

I am unable to get the top circle to move to the middle, the bottom 3 circles are fine, just needed to adjust the text and the placement of the icons centred in the circles. And at the same time, it would adjust to any screen size from tablet/mobile/laptop, I've been trying to edit it in the navigation/container with top/right % but it won't do a thing, How can I resolve this?

.container1 {
    max-width: 1000px;
    width: 100%;
  
}
.circle1 p {
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle2 p{
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle3 p {
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.navigation  {
    position:relative;
    border: 2px solid rgb(211,211,211);
    width: 300px;
    border-radius: 100%;
    height: 300px;
    background: white;
}
.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;
    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;   
    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;
    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;
    position: relative;
    text-decoration: none;
    color: inherit; 
}

.fa-9x{
    position: relative;
    font-size:7em !important;
    opacity: 0.3;
    color: inherit;
    text-decoration: none;
}

.fa-8x{
    position: relative;
    font-size:7em !important;
    transform: translate(10rem, 10rem);
    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>
                    <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>

JSRB · Accepted Answer · 2020-06-01T13:00:55.650

Try this solution.

key is:

    display: flex;
    justify-content: space-evenly;
    float: left;
    align-items: center;

.container1 {
    max-width: 1000px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    float: left;
    align-items: center;
}

.circle1 p {
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle2 p{
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle3 p {
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.navigation  {
    position:relative;
    border: 2px solid rgb(211,211,211);
    width: 300px;
    border-radius: 100%;
    height: 300px;
    background: white;
    line-height: 300px;
}
.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;
    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;   
    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;
    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;
    position: relative;
    text-decoration: none;
    color: inherit; 
}

.fa-9x{
    position: relative;
    font-size:7em !important;
    opacity: 0.3;
    color: inherit;
    text-decoration: none;
}

.fa-8x{
    position: relative;
    font-size:7em !important;
    transform: translate(10rem, 10rem);
    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>
                    <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>

https://prnt.sc/srpgqe https://prnt.sc/srphhm ty for the help — , Jun 01 '20 at 13:34
hm did you try to insert a whitespace before the attributes value? Which CSS environment are you working with? — JSRB, Jun 01 '20 at 13:35
Oh it works now, may I know what does that do? Also, how should I close the gap between the bottom 3 circles and should I use right: rem; on the top circle to properly align in the middle, since it is not quite properly aligned in the middle. Ty! — , Jun 01 '20 at 13:53
We make advantage of flexbox by centering the child container within its parent. I suggest you a deep dive into https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox please don't forget to vote and accept my answer if it was helpful :) To align the top circle right in the middle, you have to set the width of the container to 100% (full page width) — JSRB, Jun 01 '20 at 13:57

score 0 · Answer 2 · answered Jun 01 '20 at 12:59

I try to add a flexbox. maybe it will help you

.container1 {
    max-width: 1000px;
    width: 100%;
  
}
.circle1 p {
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle2 p{
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.circle3 p {
    font-weight: bold;
    font-family: 'Lato';font-size: 28px;
}
.navigation  {
    position:relative;
    border: 2px solid rgb(211,211,211);
    width: 300px;
    border-radius: 100%;
    height: 300px;
    background: white;
}
.navigation ul {
    margin: 0;
    padding: 0;
    text-align: center;
    list-style-type: none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    height:100%;
}

.navigation li {
    font-weight: 100;
    letter-spacing: 2px;
    font-size: 35px;
    font-family: 'Roboto', sans-serif;
}

.circle1{
    margin: 0 auto;
    position: relative;
    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;   
    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;
    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;
    position: relative;
    text-decoration: none;
    color: inherit; 
}

.fa-9x{
    position: relative;
    font-size:7em !important;
    opacity: 0.3;
    color: inherit;
    text-decoration: none;
}

.fa-8x{
    position: relative;
    font-size:7em !important;
    transform: translate(10rem, 10rem);
    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>
                    <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>

border-radius circle isn't sliding to the middle of the screen

2 Answers2