对齐项目时出现问题

Question

I have to list 3 items in each row, which is working fine for the desktop version, but it's not much responsive on some devices. The items overlap on iPad so when I click on the item link it doesn't open. And the text inside some of the items are longer, so I feel even this is the issue

I have tried using display :Flex and Grid but all went in vain.

Gift item

gift = [{ image_url ,Price of the item, Name of the gift }]

 giftResults { margin: 0 -5px; } .giftResults:after { content: ""; display: table; clear: both; } .error { color: red; } .giftResult { float: left; width: 25%; padding: 0 10px; } .gift-container { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; padding: 0 0; padding-bottom: 3em; } .card { background-color: #e5474b; display: inline-block; /* width: 25%; */ height: 50%; margin-top: 30px; width: 33.33333%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; } .card a { display: block; } .card h2 { padding-bottom: 25px; font-size: 20px; height: 35px; } .card:hover { height: 55%; width: 39%; } @media screen and (max-width: 600px) { .giftResult { width: 100%; display: block; margin-bottom: 20px; } .card { background-color: #e5474b; max-width: 400px; display: block; height: 50%; margin-top: 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; width: fit-content; } } 

 <div className="giftResults"> <ul>{ giftDetails } <li className="giftResult"> <div className="gift-container"> <div className="card"> <img src={props.imageUrl} alt="Item" /> <p>{`$ ${props.price}`}</p> <a href={props.url} target="_blank" rel="noopener noreferrer"> {props.name} </a> </div> </div> </li> </ul> </div> 

Answer 1

If you cannot use bootstrap check out below ...

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
     /*Define the new css rules 
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Answer 2

Im not exactly sure what you want to happen, there could be multiple outcomes, for example:

1. You have 3 items in a row, when the screen is smaller the items stack on top of each other
2. The items shrink in size and stay on the same row

If you want the items to stack on top of each other, this may help you (its very basic so you would have to update it to match your needs):

 .singleItemContainer { display: inline-block; width: 200px; height: 200px; background-color: #e6e6e6; margin: 4px; } 

 <div class="itemsContainer"> <div class="singleItemContainer"> <div class=""> Title </div> <div class=""> Text </div> <div class=""> Image </div> </div> <div class="singleItemContainer"> <div class=""> Title </div> <div class=""> Text </div> <div class=""> Image </div> </div> <div class="singleItemContainer"> <div class=""> Title </div> <div class=""> Text </div> <div class=""> Image </div> </div> </div> 

If you want the items to shrink in size (width specifically), then you would change the width to be 33.33% (with no margin in between, if you want to have space between them then you would just have to adjust the width of the elements based on how much space/padding you give the items).

For mobile sizes you have the option of using media queries, you could combines both solutions here and add media queries, the logic would be that, for example, from the screen size 320px until 600px the elements will be stacked on top of each other, after 600px the elements will have the 33.33% width.

To do this you would need to use a media query:

 .singleItemContainer{
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #e6e6e6;
    margin: 4px;
}
 @media only screen and (min-width: 320px) { //This one is probably not needed since the width: 200px; is the default one, but just threw this in here to help understand the example
    .singleItemContainer{
       width: 200px;
    }
 } 
 @media only screen and (min-width: 600px) {
    .singleItemContainer{
       width: 31.33%; //31 to allow the margins in between
    }
 }

Media queries can be added and adjusted to fit your needs, everything here can really. Hope this helps!

Answer 3

I even deleted the extra div

  <div className="gift-container"> 

which was causing the issue and even added media queries as per the above suggestions