How to make the image responsive with html & CSS in every screen size in Django?

Question

I tried in CSS to adapt the picture and make it a proper size and adapt to every screen possible. Do you know how to make it possible in CSS?

My HTML:

  <!-- Skills Section-->
          <section class="page-section Skills" id="skills">
              <div class="container">
                        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">Skills</h2>

                        <div class="skills__container bd-grid">
                            <div class="skills__box" >
                                {% for category in categories %}
                                <h3 class="skills__subtitle">{{category.name}}</h3>
                                    {% for skills in category.skills_set.all %}

                                        <span class="skills__name" >{{skills.skill_name}}</span>
                                    {% endfor %}
                                {% endfor %}

                            </div>

                            <div class="skills__img">
                                <img src="{% static '/images/img/HPD.png' %}" alt="">
                            </div>
                        </div>
              </div>
                    </section>

My CSS:

/* ===== SKILLS =====*/
.skills__container{
    row-gap: 2rem;
    margin-top: 2.5rem;
    display: flex; /* use flexbox layout */
    align-items: center; /* center the items vertically */


}
.skills__subtitle{
    color: var(--first-color);
    margin-bottom: var(--mb-3);
    margin-top: 0px;
    text-decoration: none;
}

.skills__subtitle:hover {
    /* add underline on hover */
    /*text-decoration: 2px solid var(--first-color); */
    text-decoration: underline;
}

.skills__name{
    display: inline-block;
    font-size: var(--small-font-size);
    margin-right:  1.5rem !important ;/*var(--mb-2);*/
    margin-bottom: var(--mb-3);
    padding: .25rem .5rem;
    background-color: var(--white-color);
    border-radius: .25rem;
    color: black;
}
.skills__name:hover{
    background-color: var(--first-color);
    color: var(--white-color);

}
.skills__img img{
    width: auto; /* make the image responsive */
    border-radius: .5rem;
}

.skills__box{
    flex: 1; /* make it take up the remaining space */
}

.skills__img{
    flex: 0 0 25%; /* take up 25% of the container width */
    max-width: auto; /* set maximum width of the image */
    text-align: center; /* center the image */
}

do you know how to keep and adapt the picture for other screen sizes? Make it under the text if it lowers screen size and to be naturally responsive for the picture

Answer 1

Use flex-wrap to automatically move it down:

.skills__container {
    flex-wrap: wrap;
}

If you want to move the image above the text, use flex-wrap: wrap-reverse; :

.skills__container {
    flex-wrap: wrap-reverse;
}

If you want to make the image as large as possible, shrinking other parts, use the flex: property:

.skills__img img {
    flex: 1;
}