I have done which I want but one thing Confused

I can not responsive my webpage section.
I use in css .item {
display: flex;
justify-content: center;
margin-top: 25px;
}
after that I use flex-wrap: wrap; in media queries. after that I can see just wrap .
when decrease screen 1115px. I want to see same line item like screenshot I attach.
How Can I do It?

It might be easier to assist you if you could post the code for those particular parts (or link to all of the code).

1 Like

Arnab,
Good Job fixing the bottom alignment of the Buttons, it looks Good.
Go ahead and post the Updated Codepen Link, so people Can help solve this Problem.


1 Like

code pen link

Of course
code pen link

Hm, at the moment it looks like the buy now buttons are not aligned because the pictures are different in height (see attached picture):

The first thought I had (maybe ALLESS has a nicer solution) is that you could make a grid (4 columns wide, with 2 rows) and then you could have the pictures on the first row and the price/buy button on the second row. That could help give a little more control of where the price information and the buy now button will be located. Similar to this picture (blue line added to make it clearer what I meant):

1 Like

how did you do this share code please.

Oh, I didn’t make the code for it, I just reasoned how it could be done to help you out.
But you have quite a few lessons in the course responsive web design you can check for inspiration (one section is called CSS Grid).

Edit: I guess I could try to post an example for you

In this code I used grid-template-areas, just because I find it easier to visualize how it will look that way. I didn’t put time into making it very pretty, just to help you understand how it could be done in that section in your code.

<style>
  .item {
    display: flex;
    justify-content: center;
}
  
  #item1{background:LightSkyBlue;
  grid-area: article1;}

  #item2{background:LightSalmon;
  grid-area: article2;}

  #item3{background:PaleTurquoise;
  grid-area: article3;}

  #sell1{background: red;
  grid-area: sell1}

  #sell2{background: green;
  grid-area: sell2}

  #sell3{background: red;
  grid-area: sell3}


  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "article1 article2 article3"
      "sell1 sell2 sell3";
  }

</style>

<div class="container">
  <div id="item1" class="item"><img src="https://scontent.fdac144-1.fna.fbcdn.net/v/t1.15752-9/277116319_499099201866142_6012076558755211961_n.png?_nc_cat=108&ccb=1-5&_nc_sid=58c789&efg=eyJpIjoiYiJ9&_nc_ohc=1ZpnOl4FsSMAX--gHTE&tn=ypnuz9AxVO7reuii&_nc_ht=scontent.fdac144-1.fna&oh=03_AVLiidKV-KUkrRo1llhJRHlvQXWHCPs9a2bX5wTZCfUung&oe=626D6B92" alt="Baby show"></div>
  <div id="sell1">Cost</div>
  <div id="item2" class="item"><img src="https://scontent.fdac144-1.fna.fbcdn.net/v/t1.15752-9/275003651_999134137395378_7548127215639767120_n.png?_nc_cat=111&ccb=1-5&_nc_sid=58c789&efg=eyJpIjoiYiJ9&_nc_ohc=hzbqP_H6Iq8AX9CIVXp&_nc_ht=scontent.fdac144-1.fna&oh=03_AVLuiQ-UA1z57o9tmZ8VgnBrd16brc627zldsIOGeWRkNw&oe=6269CD67" alt="baby style shirt"></div>
  <div id="sell2">Cost</div>
  <div id="item3" class="item"><img src="https://scontent.fdac144-1.fna.fbcdn.net/v/t1.15752-9/277117447_508727610860356_66986703883409183_n.png?_nc_cat=100&ccb=1-5&_nc_sid=58c789&efg=eyJpIjoiYiJ9&_nc_ohc=S2WdIfLva8IAX--WoaM&tn=ypnuz9AxVO7reuii&_nc_ht=scontent.fdac144-1.fna&oh=03_AVIgOq5Vrpt0asuUuk3m4FJ1RsVEGBcdQ_OzPT_5MhKPzQ&oe=626CD380" alt="girl shirt"></div>
  <div id="sell3">Cost</div>
</div>
2 Likes

I think, No, It’s not likely that I would have a Better one.

1 Like

if you have better way, share please