I don't know how to do CSS Responsive

Question

I would like to make the tea cups and the text under each one overlap each other in mobile format and leave it as it is in computer format, can you help me please? this is on computer and this is on mobile I would like to do something like this on mobile

HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <body>
        <div class="selection">
          <div class="mate-florale">
            <a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
              <img src="https://imgur.com/vwQHX9K.png">
            </a>
            <div class="text-mate-florale">
              <h3 text-align="justify-content">Maté florale</h3>
            </div>
          </div> 
          
          <div class="mate-agrumes">
            <a href="https://o-mate.fr/products/mate-energisant-morning-boost">
              <img src="https://imgur.com/f079TDf.png">
            </a>
            <div class="text-mate-agrumes">
              <h3 text-align="justify-content">Maté agrumes</h3>
            </div> 
          </div>


          <div class="mate-fruitee">
            <a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
              <img src="https://imgur.com/vQvNboK.png">
            </a>
            <div class="text-mate-fruitee">
              <h3 text-align="justify-content">Maté fruitée</h3>
            </div>
          </div>
        </div>

    </body>
  </head>

CSS :

img {
  width: 200px;
  margin: 30px;
  padding: center;
}

.selection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
}

I clearly don't know what i am supposed to do, that's why i ask for your help. Thank you !

could you link to a design or image or something to demonstrate your desired output ? also remember for your next question that stack overflow is not a tutorial site bro :) — PayamB.
– PayamB., Commented Jan 10, 2023 at 17:44
Hi @PayamB. Really sorry, i didn't know how to formulate my request well, i modified my post by adding screenshots. Can you tell me how I could have phrased my question better? Thanks for your help — Antoinemrl
– Antoinemrl, Commented Jan 11, 2023 at 8:37
Hi @AHaworth, I added screenshots to make it clearer to understand, unfortunately for trying flex-wrap it does not work. Thanks for your help — Antoinemrl
– Antoinemrl, Commented Jan 11, 2023 at 8:40

PayamB. · Accepted Answer · 2023-01-11 14:11:35Z

you can put every image of coffee with it's text inside a flex column that way you have three columns in one row and they are easily manageable on mobile as well

img {
  width: 200px;
  margin: 30px;
  padding: center;
}

.selection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  flex-wrap: wrap;
  gap: 10px;
}

.ccol {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ccol div {
  margin: auto;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">

  <body>
    <div class="selection">
    
      <div class="mate-florale ccol">
        <a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
          <img src="https://static.toiimg.com/photo/89078867.cms">
        </a>
        <div class="text-mate-florale">
          <h3>Maté florale</h3>
          </div>
      </div>

      <div class="mate-agrumes ccol">
        <a href="https://o-mate.fr/products/mate-energisant-morning-boost">
          <img src="https://static.toiimg.com/photo/89078867.cms">
        </a>
        <div class="text-mate-agrumes">
          <h3 text-align="justify-content">Maté agrumes</h3>
        </div>
      </div>


      <div class="mate-fruitee ccol">
        <a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
          <img src="https://static.toiimg.com/photo/89078867.cms">
        </a>
        <div class="text-mate-fruitee">
          <h3 text-align="justify-content">Maté fruitée</h3>
        </div>
      </div>
    </div>

  </body>
  </head>

Collectives™ on Stack Overflow

I don't know how to do CSS Responsive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related