My goal here is to achieve the following:
- Make these buttons responsive on all screen sizes
- Ensure that the buttons shift down when the screen size reaches Mobile size or smaller, while maintaining at least 4 buttons per row for future additions
- When the screen size hits 768px or higher, revert the rows of buttons back to being wider with 8 buttons per row
- Utilize Bootstrap 4 for this project (open to switching to Bootstrap 3 if it better suits the requirements)
I've been struggling to implement these features for a couple of days now, particularly with the media queries. This setup is specifically for a photo gallery I'm currently developing.
Below is the code snippet I've written and a link to view it in action on Codepen - https://codepen.io/gradyhouston/pen/bKLbOO/
Thank you in advance for any assistance!
HTML
.img-responsive {
display: none;
}
@media only screen and (min-width: 376px) and (max-width: 768px) {
.page-head {
font-size: 18px;
/* margin-top: -20px; */
padding: 0px;
}
}
@media only screen and (min-width: 376px) and (max-width: 768px) {
.container-gallery .vertical-buttons {
display: flex;
align-items: center;
/* display: block; */
}
}
/* @media only screen and (min-wi...
.all-button {
display: flex;
justify-content: center;
margin: auto;
}
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
padding: 5px;
}
.vertical-buttons {
display: flex;
justify-content: center;
padding: 5px;
}
.locations {
}
.button {
-webkit-font-smoothing: antialiased;
...
</div>
</div>