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., Jan 10 '23 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, Jan 11 '23 at 08: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, Jan 11 '23 at 08:40
flex-wrap works for me in the sense that the cups start going into a column as the viewport shrinks. What does it look like for you? — A Haworth, Jan 11 '23 at 09:55
@AHaworth when i use flex-wrap, the cups start going into a column in mobile but also in desktop. The only way i found to get them in line is the flex on desktop. — Antoinemrl, Jan 11 '23 at 10:13
Ohh, i think i wasn't using it well because it now works. Thanks for your help @AHaworth ! — Antoinemrl, Jan 11 '23 at 10:15
you need to be specific about whats wrong with your code, like you have a problem, you have tried to solve your problem in a certain way and now you have a clear and specific problem that you don't know how to solve, asking about how to do sth is not so welcome here , `when i use flex-wrap, the cups start going into a column in ...` this comment is actually a better question :) because it's talking about a question instead of asking for help on how to do something. also if your problem is solved you can post an answer to your own question. — PayamB., Jan 11 '23 at 13:41

PayamB. · Answer 1 · 2023-01-11T14:11:35.363

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>

I don't know how to do CSS Responsive

1 Answers1