The circle border-radius is refusing to slide to the center of the screen

I'm having trouble moving the top circle to the center, while the bottom three circles are displaying correctly. I need to adjust the text and icon placement in the circles to be centered. Additionally, I want the layout to be responsive across different screen sizes including tablets, mobile devices, and laptops. I've attempted to edit it using percentages for the top/right position within the navigation/container but nothing seems to work. How can I fix this issue?

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5d425d5d485f03475e6d1c031c1b031d">[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>

htmlcssbootstrap-4

Answer №1

Here's a possible solution to your issue.

The key elements are:

    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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7879887879285d99d84b7c6d9c6c1d9c7">[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>

Answer №2

Implementing a flexbox could potentially improve the layout for 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with Animations in Animate.css

Seeking to achieve fluid transitions using Vue.js and Animate.css, encountering issues with certain animations not functioning as expected! Successfully implementing animations such as: bounceIn, bounceOut, and hinge. Experimenting with this on codepen.i ...

javascriptcssvue.jsanimate.css

Concealing excess content in a vertical container with margins

I'm currently working on setting up a grid of thumbnails for my blog posts using Bootstrap 4. The columns have a size of col-md-6. Within each column, there is an anchor with a background image and a gradient overlay that transitions from black to tr ...

htmlcsstwitter-bootstrapbootstrap-4

The Bootstrap 4 grid appears to be malfunctioning as the columns are not displaying next to each other as expected

I've implemented the code below in an attempt to achieve the desired layout shown in the image, but instead, I'm getting a different outcome. Can someone help me figure out what I might be doing wrong with the Boostrap 4 grid system? I'm co ...

cssbootstrap-4

Struggling to set up a vertical grid using CSS in Bootstrap 3

Currently in the process of working on my final project as a student. Utilizing Bootstrap 3, I am striving to construct a grid that mirrors the structure depicted in the image below: Thus far, I have only achieved success in creating grids that span hori ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...

javascriptjqueryhtmlcss

Ways to secure a floating item onto a backdrop picture

Currently I am working on editing this page. When you hover over the cat, its eyes blink or two black dots randomly appear. My goal is to prevent the random blinking dots from appearing. I want to keep the hover object attached to the cat/background image ...

csshoverpositionbackground-imagemousehover

How can you modify the color of a FontAwesome icon?

I am currently utilizing BigCommerce and my code looks like this: .icon-cart { color: #4ca3c0 !important; } .icon-cart a{ color: #4ca3c0 !important; } Despite the above, it seems that the icon's color remains unchanged. Any suggestions or i ...

htmlcssbigcommerce

CommentsController#new encountered a NoMethodError due to an undefined method called 'text' for the Comment with the following attributes: id: nil, author: nil, created_at: nil, updated_at: nil

I'm currently integrating rails with react to include a comments section in the app I am developing. While the /comments page is functional, I encountered an error when attempting to create a new comment. Despite consulting the guide I am following, t ...

htmlruby-on-railsruby-on-rails-4reactjserb

Using Bootstrap 4 to create columns with fixed width and displaying the rest of the line in the card-footer

I have a bootstrap-4 card containing a footer. The footer consists of a fixed-width input field and a button. The button needs to expand to the width of 100% minus the width of the input field. https://jsfiddle.net/aq9Laaew/224543/ input { width:3rem; ...

cssflexboxbootstrap-4

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

javascriptphphtmlforms

"Despite being higher in position, the z-index is causing the element to be placed below

I am currently facing an issue with a dropdown menu that I am trying to add to a WordPress site using Visual Composer. The problem arises when I attempt to place the dropdown on top of a parallax section below it. Despite setting the z-index of the paralla ...

javascriptjquerycssz-index

determine a distinctive identification for an HTML ID

<div id=Pear1> <div id=Circle></div> </div> <div id=Pear2> <div id=Circle></div> </div> <div id=Pear3> <div id=Circle></div> </div> <div id=Pear4> <div id=Circ ...

jqueryhtml

Managing different user types in HTML5

I'm in the process of creating an application that interacts with a service and performs various tasks based on user permissions. After doing some research, I discovered that Kinvey offers a solution that is similar to what I need, but I'm not c ...

phpandroidioshtmlcordova

What are the steps to create a CSS3 blur effect within a parent container?

Is it possible to create an inner-blur effect using css3 without ignoring the parent container dimensions and causing overflow? Any tips or tricks on achieving this? html <div class="box"> <div class="blur"> <img src="..." ...

htmlcss

css Problems with the height of the tab bar

Trying to set up a tab bar with additional padding on hover, but encountering an issue where the parent div moves on hover state. Here is the HTML code: <div id="statNav"> <a href="#">Gogus</a> <a href="#">Kol ...

htmlcss

Container for Magazines using HTML and CSS

Looking to develop a digital magazine application with smooth swipe transitions and fade in effects when swiping left and right. I attempted using jQuery.mobile, but struggled with adapting the background image height. My goal is to create a universal web ...

javascripthtmlcssjquery-mobile

Do "popper" and "popper.js" exist as separate packages within the npm repository?

Following a tutorial, I attempted to install popper using the command npm install popper --save. However, I encountered an error message: fatal error - cygheap base mismatch detected - 0x13A1410/0x13D1410 After searching for the GitHub page of the library ...

npmbootstrap-4popper.jsreact-popperpopperjs

Invoke a TypeScript function from the HTML code embedded within a TypeScript component

In my pop-up window, there are 2 buttons: Update and Delete. I need to implement functionality so that when the Update button is clicked, the current pop-up should disappear and a new editable pop-up with the same fields should appear, along with two addit ...

javascripthtmlangulartypescriptleaflet

extracting information online with python selenium web scraping

Having trouble retrieving the content in this location as it is showing up blank. Can someone please assist me? The element I am trying to capture is: Đã bán 74k/tháng Here is my code snippet: print(driver.find_elements(By.CSS_SELECTOR, "div.r ...

pythonhtmlselenium-webdriverclickelement

ngAnimate - Animation not activating on recurring custom directive

I am trying to implement ngAnimate on a custom directive that is repeated using ng-repeat in my AngularJS application. The animations function correctly when I use ng-repeat on a simple HTML list-item. However, when I replace the list-item with a custom di ...

cssangularjsanimationangularjs-directiveng-animate