[Solved] how to make following div responsive [closed]

Question

It’s very difficult to see the issue without looking at how you’ve coded it unfortunately, could you copy in your code so we can see how you’ve got things setup?

However, I will give it a go. I’m going to assume that the four vehicles are in a wrapper div and that you want the images of the vehicles to fall beneath each other when the window gets smaller.. something like this:

/* Standard size */
.carImage{
   width: 25%;
}

/* Tablet Size */
@media only screen and (max-width: 768px) {
   .carImage{
      width: 50%;
   }
}

/* Mobile Size */
@media only screen and (max-width: 480px) {
   .carImage{
      width: 100%;
   }
}

Change the .carImage to whatever class you have for each car image – but once again I can’t tell the exact problem unless you paste your code in. If this doesn’t help copy the code in and I will try again.

EDIT: After looking at the code you sent:

https://jsfiddle.net/o05yvL1h/3/

I wouldn’t use position: absolute; in the way you’ve done it, I don’t use it very often personally so maybe this won’t help, but maybe it will – just a quick example of how you might go about it. I’ve changed the image sources just for an example, Hope it helps…

Accepted Answer