0

I have these 3 boxes

enter image description here

That's how they appear on desktop, but I need to make them be responsive, and when someone open the page on a smartphone, the 3 images can't stay in a horizontal line, but in the vertical. Here's the HTML

<div class="gallery-140721">
            <div class="gallery-card-140721">
                <a href="" target="_blank"></a><img
                        src="galeria-hotsite-modelo-molas-vl-1.jpg" alt="modelo 1"></a>
                <p class="gallery-title-140721">|MOLAS ENSACADAS|</p>
                <p class="gallery-text-140721">Cama Box Herval Lofty</p>
            </div>

            <div class="gallery-card-140721">
                <a href=""
                    target="_blank"><img src="galeria-hotsite-modelo-molas-vl-2.jpg" alt="modelo 1"></a>
                <p class="gallery-title-140721">|MOLAS MAXSPRING|</p>
                <p class="gallery-text-140721">Cama Box Herval Irland</p>
            </div>

            <div class="gallery-card-140721">
                <a href=""
                    target="_blank"><img src="galeria-hotsite-modelo-molas-vl-3.jpg" alt="modelo 1" /></a>
                <p class="gallery-title-140721">|Molas Bonnel|</p>
                <p class="gallery-text-140721">Cama Box Herval Troya</p>
            </div>
        </div>

I'm really new to all of this, then sorry if it is a really dumb question...

Tiago Theisen
  • 1
  • 1

2 Answers2

1

Declare the display type of these elements flex then add media query with flex-direction: column The same could be done with a display: grid

Abhijeet
  • 23
  • 3
0

You can add media query. It will append style on smaller resolution. For example something like this could help you.

  @media only screen and (max-width: 700px) {
      .gallery-card-140721 {
        width: 100%;
      }
    }

Here is more about media query https://www.w3schools.com/css/css_rwd_mediaqueries.asp

TenTibor
  • 1