What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

having trouble with css

iDont-haveName

New member
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Homepage</title>
</head>
<body>
<header>
<div class="logo"><img src="logo.png" alt="Logo"></div>
<div class="title">reIMAGE</div>
<nav class="header-nav">
<a href="">Upload</a>
<a href="">Settings</a>
<a href=""><img src="profile.png" alt="Profile"></a>
</nav>
</header>
<main>
<section class="sidebar-section">
<nav class="sidebar-nav">
<a href="" id="photo-anchor">Photos</a>
<a href="" id="album-anchor">Albums</a>
<a href="" id="video-anchor">Videos</a>
<a href="" id="favourite-anchor">Favourites</a>
<a href="" id="locked-album-anchor">Locked Albums</a>

<a href="" id="trash-anchor">Trash</a>

</nav>
</section>
<section class="main-section">
<div class="slideshow-container">

<div class="slideshow-image">
<img src="dummy.png" alt="">
<img src="dummy.png" alt="">
<img src="dummy.png" alt="">
<img src="dummy.png" alt="">
<img src="dummy.png" alt="">
</div>

</div>
<div class="all-photos-container">
<div class="all-photos-contents"></div>
</div>
</section>
</main>
</body>

</html>


body{
overflow-y: hidden;
}
header{
display:grid;
grid-template-columns: 1fr 5fr 1fr;
background: rgb(136, 132, 132);
height:60px;
}
.header-nav{
display:grid;
grid-template-columns: 60px 60px 60px;
column-gap:10px;
}
.header-nav a{
background-color: aqua;
}



main{
width: 100%;
height: 100vh;
display:grid;
grid-template-columns: 20vw 80vw;
height: calc(100vh - 60px); /* Adjust height to account for header */
}
.sidebar-section{
background-color: rgb(245, 157, 157);
display: flex;
overflow-y: auto;
flex-direction:column;
overflow-y: scroll;
}
.sidebar-nav{
font-size: 20px;
display: flex;
flex-direction:column;
justify-content: space-between;
padding:25px;
height: 100%;
gap: 10px;
}
.sidebar-nav a{
background-color: aqua;
height: 50px;

}
#trash-anchor{
margin-top: auto;
}

.main-section{
background-color: rgb(157, 157, 245);
}
.slideshow-container{
background-color: rgb(245, 157, 157);

overflow: scroll;

height: 40%;
}
.slideshow-image{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
column-gap: 50px;
align-items: center;
}

can anyone help with this problem. from the div class=slide-container, there are images and using grid, i want those images to be in one row only but as you see i am having trouble with the css cause even though i added the overflow:hidden the images are overflowing still or i use the grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));, instead of one straight rows another adds. please help me fix this and sorry for my english im not that good of it
 

Attachments

  • Screenshot 2024-07-26 012047.png
    Screenshot 2024-07-26 012047.png
    227.3 KB · Views: 0
Back
Top