I'm in the process of developing a responsive website and my goal is to keep all my divs centered at all times.
However, I've encountered an issue where using the flex attribute in my container causes the bootstrap cards to go offscreen. Can anyone provide any suggestions on how to address this?
Normal Screen View Normal Screen
Mobile Screen :( View Mobile Screen
My HTML CODE
<body>
<div class="container">
<div class="d-flex justify-content-center align-items-center">
<form action="" method="POST">
{% csrf_token %}
<div id="smain">
<h1> Let's Start</h1>
<div class="card-deck">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{% static "/images/pc.jpg" %}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title bulk of the
card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{% static "/images/dance.png" %}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example
text to build on the card title and makecontent.
</p>
<a href="#" class="btn btn-primary">Go
somewhere</a>
</div>
</div>
</div>
</div>
</form>
</div>
CSS
body {
background-image: url("{% static "images/unnamed1.jpg" %}");
background-size: cover;
background-repeat: no-repeat;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}