As a newcomer to Bootstrap 4, I have carefully gone through the documentation multiple times, but I have been facing challenges in making my project completely responsive for some time now.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SwaggySauron</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="swaggysauron">
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 offset-9 pix pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-3 purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix offset-3 pink"></div>
</div>
<div class="row">
<div class="col-1 pix pink"></div>
<div class="col-1 pix offset-2 purple"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix black"></div>
<div class="col-1 pix cyan"></div>
<div class="col-1 pix purple"></div>
<div class="col-1 pix offset-2 pink"></div>
</div>
...
<p>My CSS:</p>
<pre><code>.pink {
border: 3px solid pink;
background-color: pink;
}
.purple {
border: 3px solid purple;
background-color: purple;
}
.cyan {
border: 3px solid #00ffff;
background-color: #00ffff;
}
.black {
border: 3px solid black;
background-color: black;
}
.pix {
height: 50px;
border: 1px solid white;
}
.swaggysauron {
min-width: 380px;
}
The challenge I am facing is related to my .swaggysauron DIV, which contains all the colored squares. When the screen size is reduced, it disappears instead of staying in place. Although it seems partially responsive, I believe I might be overlooking something crucial.
Any hints or explanations on where I might be making a mistake would be greatly appreciated.