While utilizing the default bootstrap col classes, I noticed that when I reduce the grid to mobile size, the columns span the entire width of the row. This results in a long vertical list of items on mobile devices, even though there is sufficient space on the horizontal axis for more items to fit.
For my personal website, I am creating a course section where a grid layout of the courses we plan to offer is displayed. Below, I explain the issue and what I have attempted so far.
Here is the HTML code I am using:
<div class="container courses-container">
<div class="row justify-content-center courses-header no-gutters">
<div class="col-1">
<h2>Courses</h2>
</div>
</div>
<div class="row courses">
<div class="col-xs-1 col-md-2 course-item">
<div >
<img src="https://cdn4.iconfinder.com/data/icons/musical-instruments-22/50/22-512.png" alt="..." class="img-fluid" >
</div>
</div>
... (Additional course items follow)
</div>
</div>
And here is the CSS code:
.courses-header {
margin: 2em 0;
}
.carousel-container, .courses-container {
padding: 0;
}
@media (min-width: 720px) {
.courses {
margin: 3em 0;
}
}
@media only screen and (max-width: 767px) {
.course-item {
width: 33%;
}
}
The last media query at the 767px breakpoint addresses the issue by adjusting the width of each column to 33% on smaller screens. However, without this adjustment, each column spans across one line, creating a layout issue. It seems like there should be a simpler solution to ensure the grid displays correctly on smaller screens.
On larger screens, the full layout consists of 2 rows with 6 columns each. This layout is not feasible on smaller screens due to its width. When resizing the browser window to a smaller size, the columns should break into more rows vertically, maintaining at least 2 or 3 items side by side.
The objective is for the items to gracefully transition into more rows on smaller screens while keeping multiple columns together. The smaller the screen, the fewer items should appear on each line, but there should always be a minimum of 2 or 3 items side by side.