Hello Im trying to show off my potfolio using lightbox. Right now when the browser height is full you can see the entire image along with paragraph and buttons.
The problem is when the browser height is smaller you get two scroll bars (I only want one) and you cant scroll down and see the buttons. Im worried people with a smaller laptop wont be able to see the buttons.
So this are the two things I need help with
- How to have only one scroll bar?
- how to set up the scroll bar to scr
HTML
<!-- ================= Image & Lightbox Container ================== -->
<!-- PHOTO BOOTH TEMPLATE KING -->
<div class="single-content webdesign webdev grid-item">
<a href="#img21">
<img
class="p2"
src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/Photo-booth-template-king_Web-Design_01.jpg"
/>
</a>
</div>
<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img21">
<div class="image-button-container bg-white p-2">
<img
src="http://ruben123.com/img/ruben-123-Portfolio-img/web-design/Lightbox/Photo-booth-template-king_Web-Design-light-box_01.jpg"
/>
<div class="button-text-container">
<p class="py-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
temporibus suscipit magni deleniti accusamus fuga dolores et
dignissimos quo, odio officia nihil dicta maiores eos ut nobis
id iure facere.
</p>
<!-- ======================== ****** Buttons Container ****** ======================== -->
<div class="buttons-container">
<!-- Button Download -->
<form
method="get"
action="img/ruben-123-Portfolio-img/downloads/PBT-King-Web-Design.zip"
>
<button class="btn-dark" type="submit">Download PSD</button>
</form>
<!-- Visit Website -->
<button
class="btn-dark"
onclick="window.location.href = 'https://photoboothtemplateking.com/';"
>
Visit Website
</button>
</div>
<!-- ======================== ****** Buttons Container ****** ======================== -->
</div>
</div>
</a>
<!-- ================= ******************* IMAGE & LIGHTBOX CONTAINER - END ******************* ================== -->
SCSS
/** LIGHTBOX WEBSITE MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.lightbox img {
/** Pad the lightbox image */
width: 100%;
display: block;
max-height: 100%;
// margin-top: 2%;
}
.image-button-container {
// position: absolute;
width: 50%;
margin: 2% auto;
display: block;
overflow: auto;
height: 100%;
position: relative;
}
.lightbox .button-text-container {
p {
// width: 40%;
// color: white;
display: block;
position: relative;
}
.buttons-container {
// position: absolute;
// bottom: 40px;
display: flex;
justify-content: center;
// display: block;
// position: relative;
.btn-dark {
margin: 0 1rem;
border: 3px solid white;
}
}
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
