0

I am beginner to Front end technology. I AM not sure which part of my code making my logo image showing in circle. Kindly point me what css property making it occuring so. I am new to css and coudnt figure out which property is responsible for this. I have already tested with align items and padding values but nothing is working to change the image oval shape. I want my image to be in square shape or in another shape. If anyone have any idea please point in direction of how you guys resolve this kind of solution.

HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <header>
    <div class="logo">
      <img src="logo.png" alt="">
    </div>
    <nav class="nav" id="nav-menu">
      <ion-icon name="close-outline" class="header_close"> </ion-icon>
      
      <ul class="nav_list">
        <li class="nav_item"><a href=""class="nav_link">Home</a></li>
        <li class="nav_item"><a href=""class="nav_link">About Us</a></li>
        <li class="nav_item"><a href=""class="nav_link">Training</a></li>
        <li class="nav_item"><a href=""class="nav_link">Train with us</a></li>
        <li class="nav_item"><a href=""class="nav_link">Contact Us</a></li>

      </ul>
    </nav>
    <ion-icon name="menu-outline" class="header_toggle"></ion-icon>
  </header>


<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
  </body>
</html>

CSS file:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,500;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
}
ul{
    list-style: none;
}

header{
    display: flex;
    background-color: #222831;
    justify-content: space-between;
    padding: 1rem 0;
    align-items: center;
}
.logo{
    display: flexbox;
    align-items: center;
}
.logo img{
    width: 200px;
    border-radius: 100%;
    margin-right: 10px;
}

.header_logo{
    color: #eeee;
    
}
.nav_list {
    display: flex;
    align-items: center;
}

.nav_item {
    margin: 0 8px;
}

.nav_link {
    padding: 10px;
    color: #eeee;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 5px;
}
Improve this question

3 Answers 3

Reset to default
1

it's because of;

border-radius: 100%;

When you make the border-radius 100% thinner, it turns into a circle.

Improve this answer
0

Remove border-radius: 100%; from your CSS.

.logo img{
  width: 200px;
  margin-right: 10px;
}
Improve this answer
0 
.logo img{
    width: 200px;
    border-radius: 100%;
    margin-right: 10px;
}

You have a problem with this set of code - the border-radius part. In the future, if you'd like to see which class/line causes the error, you can inspect the element and under styles you'll get all the classes that are attached to the element itself. In your browser, you can check/uncheck classes and see which one does the problem.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.