This is my slide show i am trying to fix some width and height but not working

i warped it in a div and applied some measurements then it is not working properly. those rows are placed far away from the image.

code pen

I don’t really understand what you’re asking here, but the image in your codepen is enormous - around 25Mb. That’s far too big, even for testing. I’d suggest optimising the images first before trying to troubleshoot anything else.

It sure doesn’t help any.

By resizing the view-port, it looks like one, if not the, problem is that the images have different heights.

AFAIK there are three options that may work

  • give all the images the same width and height values - some images may be squished or stretched
  • give the image containers overflow hidden - the bottom or right portions of some images might not display
  • crop / resize the images to a uniform size

IMHO the last is preferred, more work, but you have control over what portion of the images will remain and you can optimize them for the web at the same time

that is a google image so i just linked it so tell me if there is anyway to optimize it :slight_smile:

i putted this slide show in a div which ha an id(size) and fixed some width and height but the arrow point is place far away from it .code pen

Add position:relative to the wrapper.

e.g.

#size img
{
width:auto;
height:200px;
}
#size{
 width:200px;
 height:200px;
 position:relative;
}

hey thanks for helping me to learn a new thing today :slight_smile:

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