I know to make the container not to overflow but I’m still getting the horizontal scrollbar.
For the context I have used flex
for the parent here (i.e .container
)
I checked if the child elements are the one causing the overflow but that wasn’t true. When I reduce the .container
class width to 98% the horizontal scrollbar disappeared, but this is not a appropriate approach as the screen size increases the gap is more visible due to the width being 98%.
So I’ve been trying to remove the horizontal scrollbar but I’m stuck as I’m not sure what the issue is , is it my browser problem or is it because of any error in my CSS?
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
.logo{
padding: 0;
margin:0;
}
@media screen and (min-width:320px) {
.container {
display:flex;
align-items: center;
flex-direction: column;
width: 10%;
height: 100vh;
padding-top: 5px;
background-color: rgb(73, 171, 232);
}
.container img {
margin: 0;
width: auto;
height: 20px;
padding:0
}
.navigation ul {
list-style: none;
}
.navigation i {
margin: 10px 0 0 0;
font-size: .75em;
}
.navigation ul a {
display: none;
}
}
@media screen and (min-width:768px) {
.container {
display:flex;
align-items: center;
justify-items: center;
flex-direction: column;
width: 20%;
height: 100vh;
padding-top: 5px;
background-color: rgb(73, 171, 232);
}
.container img {
justify-content: center;
align-items: center;
margin: 0;
width: auto;
height: 40px;
padding:0
}
.navigation ul {
align-items: center;
list-style: none;
}
.navigation li{
display:flex;
flex-direction: column;
align-items: center;
}
.navigation i {
margin: 10px 0 0 0;
font-size: 1em;
}
.navigation ul a {
display: contents;
font-size:x-small;
color: white;
}
}
@media screen and (min-width:1200px) {
.container {
display:flex;
flex-direction: row;
width: 100%;
height: 100px;
padding: 5px 0 0 20px;
background-color: rgb(73, 171, 232);
}
.logo{
flex-grow:1 ;
}
img {
width: 60px;
height: 60px;
padding-right:20px;
}
.navigation ul {
display:flex;
width: 100%;
gap: 50px;
margin:0;
list-style: none;
}
.navigation li{
margin-right: 20px;
display:flex;
flex-direction: row;
justify-content: end;
}
.navigation i {
margin: 10px 0 0 0;
font-size: 1.5em;
margin-bottom:10px ;
padding: 2px;
}
.navigation ul a {
display: none;
font-size: medium;
color: white;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="https://shmector.com/_ph/13/188552034.png"
alt="logo">
</div>
<!-- <div class="nav"> -->
<nav class="navigation">
<ul>
<li><i class="fa fa-home" aria-hidden="true"></i><a href="#">Home</a></li>
<li><i class="fa fa-address-book" aria-hidden="true"></i><a href="#">Address</a></li>
<li><i class="fa fa-phone-square" aria-hidden="true"></i><a href="#">Contact</a></li>
<li><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="#">Product</a></li>
<li><i class="fa fa-arrows-h" aria-hidden="true"></i><a href="#">goto</a></li>
</ul>
</nav>
<!-- </div> -->
</div>
</body>
You need to sign in to view this answers