Currently working on my portfolio and have incorporated a horizontally scrolling gallery featuring 3 macbook screenshots of my personal projects. My bootstrap skills are still developing, so any assistance would be greatly appreciated.
Primarily, I am aiming to center the scrolling on the initial image within the gallery. Could use guidance on how to achieve this as the edge of the second image always remains visible.
Additionally, looking to ensure the gallery remains responsive while continuing to center on the primary project picture. Any advice on how to accomplish this would be beneficial.
On a side note, I intend to create a modal for each image containing relevant case study material for every project.
Thank you in advance!
HTML
<!-- Work Section -->
<section id="work" class="container content-section text-center">
<div class="container">
<div class="row">
<div class="gallery horizontal-gallery">
<img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
<img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
<img class="work-modals" src="http://madebymunsters.github.io/Lannister/img/blocitoff.png">
</div>
</div>
</div>
CSS
.gallery {
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.gallery .horizontal-gallery {
display: inline;
}