I am trying to create a portfolio website and wish to have a section on a carousel which would display projects I have completed in a 2x2 grid. I would have each project placed into a card and when the screen size is too small, the grid will turn into a 1x4 displaying each of the project cards on their own row.
I have spent hours pouring over the Bootstrap documentation as well as some youtube tutorials. And while I was able to create the card sizing I was looking for on a desktop screen size, it fell apart and looked awful when brought over to mobile. I have tried to play with the various attributes which can be associated to the "col" class but they don't seem to be doing anything helpful in my current situation. I've hit a bit of a roadblock and do not know what other resources would assist me in sorting out this issue.
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap & other CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="./index.css">
<title>Attempted Portfolio</title>
</head>
<body>
<div class="intro-container">
<div class="container">
<h1>
My Name The
<span class="txt-type" data-wait="3000" data-words ='["Developer", "Designer", "Creator"]'></span>
</h1>
<h2>Welcome to my website</h2>
</div>
</div>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<h1>About Me</h1>
<p>4 Buzzwords, Maybe a picture with brief about me, list skills/languages</p>
</div>
</div>
<div class="carousel-item">
<div class="container">
<h1>Projects</h1>
<!-- Project Showcase -->
<div class="row align-items-center">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="cart-text">Project Info</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="cart-text">Project Info</p>
</div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="cart-text">Project Info</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Project 4</h5>
<p class="cart-text">Project Info</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
index.css
@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
body {
font-family: 'Raleway', sans-serif;
height: 100%;
color: #fff5f7;
overflow: scroll;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0 3rem;
}
.intro-container {
background: #ffb7c5;
color: #fffce3;
height: 100vh;
}
.carousel-item {
background-color: #fff0f2;
color: #805258;
height: 100vh;
}
.box {
background-color: #FFBEAB;
margin: 60px;
padding: 20px;
margin: 20px;
}
.card {
background-color: #FFBEAB;
display: flex;
margin: 80px;
width: 20vh;
height: 100%;
}
h1, h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
/* Cursor Animation */
.txt-type > .txt {
border-right: 0.2rem solid #fff5f7;
}
@media(min-width: 1200px) {
h1 {
font-size: 3rem;
}
}
@media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 1.5rem;
}
}
@media(max-width: 500px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1rem;
}
}
You can use make the 4x4 grid using the
col-sm-6bootstrap class which will convert it to a 1x4 at thesm(/xsif you prefer) screen size which is equivalent to mobile size.