I have done which I want but one thing Confused

HTML-CSS
1

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?

Screenshot (381)
Screenshot (381)1355×569 367 KB

2

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
3

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
4

code pen link

5

Of course
code pen link

6

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

image
image1317×422 112 KB
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):
exampleofgrid
exampleofgrid1433×394 358 KB

1 Like
7

how did you do this share code please.

8

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

9

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
10

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

1 Like
11

if you have better way, share please

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.