Struggling to keep the cards neatly contained within the background image regardless of screen size.
Here's my code snippet:
{% block content %}
<style>
.custom-skills-section {
background: url('{{ background_image }}') center center / contain no-repeat;
border-radius: 10px;
padding: 20px;
margin: 0 auto;
width: 100%;
max-width: 1600px;
height: 1200px;
}
.custom-skill-card-shadow {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.custom-skill-card-content {
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #f0f4f8;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.custom-skill-title {
font-size: 1em;
font-weight: 600;
color: #333;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
</style>
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<div class="custom-skills-section">
<h2 class="text-center text-white py-4">My Skills</h2>
<div class="container">
<div class="row">
{% for skill in skills %}
<div class="col-lg-4 col-md-6 col-12 mb-4 custom-skill-card">
<div class="custom-skill-card-shadow">
<div class="custom-skill-card-content">
<h4 class="custom-skill-title">{{ skill.name }}</h4>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock content %}
Greetings, I'm attempting to make the cards appear like they are pinned to a vintage note board but they always seem to spill out. On smaller screens, they protrude beyond the bounds of the background image both vertically and horizontally.
For reference, check out this image: https://i.sstatic.net/istlq2j8.png