Image Flex focuses on other devices, but not on my laptop
P粉270891688
P粉270891688 2024-02-17 20:18:55
0
1
367

I'm creating a web page and I'm running into an issue, I have 4 images displayed on the flex in my page, when I click "Inspect" and see how it displays on other devices, I see the top There are 2 images, and 2 more images at the bottom. Enter image description here

But when I go back and display it on my laptop I see 3 images at the top and 1 image at the bottom, enter image description here

I'm wondering what I can do to fix it so that it always shows the images from the first picture (2 on top, 2 on bottom).

This is a piece of my code

img {
width: 350px;
padding: 5px;
transition: transform .2s;
}

img:hover {
cursor: pointer;
transform: scale(1.03);
}

.container {
margin-top: 80px;
display: flex;
max-width: 1500px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

P粉270891688
P粉270891688

reply all(1)
P粉779565855

Browsers will fit as many images as 350 pixels wide on a single line. If they don't fit, it wraps them to the next line.

If you want to always have two images per row in the flexbox, you can set the width of the images to 50% of the screen width. Because you have 5px of padding on each side, you can subtract it from 50% using the calc() function like this:

width: calc(50% - 10px);

The following is an example of your code:

img {
  width: calc(50% - 10px);
  padding: 5px;
  transition: transform 0.2s;
}

img:hover {
  cursor: pointer;
  transform: scale(1.03);
}

.container {
  margin-top: 80px;
  display: flex;
  max-width: 1500px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
  
    
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template