Html Question posted in
Some basic documentation can be found here.

Html – Any way to keep the cards always inside the background image?

I want the cards to remain inside of the background image no matter of the screen size, and it’s not working with me.

Here’s my content code

{% 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 %}

Hello,
I’m my idea is to put the cards inside the note board to appear like old school. but the cards always get out from the note board. on smaller screens they get out from up and down of the background image.

See how it looks on this image:
enter image description here

Tags:

2

Answers


  1. 0

    you can try this your CSS style:

    .container{
  max-width: 95% // so that it will be never in outside the box and make 
                 sure it is less than 100%
}
.custom-skills-section {
 //your existing
 background-size: cover; 
}

    Note: For Card , use Grid display

    Login or Signup to reply.
  2. 0

    something like this should help you. Play with values of css to get what you expect exactly.

    <style>
.custom-skills-section {
    background: url('{{ background_image }}');
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin:5%;
    overflow:scroll;
}

.custom-skills-section h2 {
    width:100%;
    text-align:center;
    color:white;
}

.custom-skill-card {
    width:33%;
}

.custom-skill-card-shadow {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1rem;
}

.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%;
}
.row {
    display:flex;
    flex-wrap:wrap;
}
</style>

<div class="d-flex justify-content-center align-items-center" style="height: 100%;">
    <div class="custom-skills-section">
        <div class="container">
            <h2>My Skills</h2>
            <div class="row">
            {% for skill in skills %}
                <div class="custom-skill-card">
                    <div class="custom-skill-card-shadow">
                        <div class="custom-skill-card-content">
                            <h4 class="custom-skill-title">{{ skill }}</h4>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search