Creating a portfolio website with a carousel section to display completed projects in a 2x2 grid layout, transitioning to a 1x4 on smaller screens is proving to be quite challenging. After trying various methods from Bootstrap documentation and YouTube tutorials, the design looks perfect on desktop but breaks on mobile view. Adjusting the "col" class attributes didn't help fix the problem, leading to a roadblock in finding a solution.
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
...
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="app.js"></script>
...
</body>
</html>
index.css
@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
...
}