Scaling site down pulls two DIVs apart.

[dutch]

Within a single-column CSS grid, I have a div running a js slideshow that sits atop a second div. When I scale the site down, those two divs pull away from each other. I would like to be able to maintain a constant distance between the two divs, but I can’t get that to work. The div classes in question are “slides” and “centertext”.

codepen

I’d be grateful for any ideas about a fix.

thanks
Dutch

[Paulie_D]

When you refer to scaling down I’m assuming you are referring to making the window smaller and not zooming.

The problem is that the images are responsive but the container is a fixed height so the image shrink but the container does not.

.slides {
  width:100%;
  max-width: 1000px;
  height: 670px; /* this */
  position: relative;
}

[Paulie_D]

Using your current method (absolute positioning) I was pretty sure this was not solvable.

Then I remembered that you don’t need absolute positioning to layer elements…CSS-Grid can do that.

If you tell all the images to be in a single grid-cell, they layer automatically and….BOOM!

Remove the height from the slides div and it works.

https://codepen.io/Paulie-D/pen/QBgryN

[dutch]

Bingo! Paulie–what huge help! Thanks so much for your time and expertise.

[Author]

Posts