My website used to have photobanners displayed horizontally with the ability to scroll through them, but after accidentally deleting some code, I realized that now the images are cut off at the edge of the webpage without a scrollbar. How can I restore the original functionality?
I attempted to force a scrollbar using html {overflow: scroll;}, but it didn't work as expected. Adding overflow: scroll; or :auto; directly to the photobanner also produced undesirable results. Even setting width: 100%; for the html div had no effect.
This is the relevant CSS:
#container1 {
width: 4000px;
overflow: hidden;
margin: 100px auto;
background: none;
}
/*header*/
header1 {
width: 1800px;
margin: -400px;
}
header1 h1 {
text-align: justify;
font: 100 60px/1.5 roboto condensed;
}
header1 p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 8550px;
margin-left: -400px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
And the HTML:
<div id="container">
<div style="float: top;">
<div style="margin-top: -475px;">
<div class="photobanner"><img alt="" class="first" height="575" src="LINK"
/><img alt="" height="575" src="LINK" /><img alt="" height="575" src="LINK"
/><img alt="" height="575" src="LINK" /><img alt="" height="575" src="LINK"
/>
<p>___</p>
<h1>HEADER</h1>
<p>CAPTION</p>
</div>
</div>
</div>
</div>
An issue with my photobanner was mysteriously resolved when I temporarily removed a section from my HTML where I planned to build my header:
<body class='section-1'>
<div id='menu'>
<div class='container'>
<div align="center"><a href="https://terrichienyi.com/"><img src="https://66.media.tumblr.com/37c178aaab3ceab836b8136297132679/tumblr_pjqt2u
lQ8R1xmt4ilo5_1280.png"></a>
<a href="https://google.com/" target=blank><img
src="https://sc01.alicdn.com/kf/HTB1suoTg5qAXuNjy1Xdq6yYcVXaq/14inch-button-
interface-small-size-color-tv.jpg_50x50.jpg"></a><a
...
...
...
</div>Unexpectedly, reordering this HTML snippet within my overall code did not solve the issue and sometimes disrupted the layout of the header. Removing it entirely fixes the problem, but I want to find a solution where the header remains intact while resolving the scrolling problem.