Background Images in CSS Grid

Design help General
1

Hello! I am creating a portfolio site using CSS grid to showcase my work. I have created a grid and am using lightbox elements with background-images set on them. Everything looks fine in the designer but when previewing the live site, the images have almost no height. What’s going on here? Thanks!

Here is my site Read-Only:
https://preview.webflow.com/preview/vonburske-design?utm_source=vonburske-design&preview=7d1032c2cf1718e080af4bd7a1a44e06

Here is the live site:
https://vonburske-design.webflow.io/

2

@vonBurske - I have actually not used the CSS grid much, but you could just do it like this:

https://www.loom.com/share/8a94dc7605b642fa933327eaf6459594

3

Hey @vonBurske, was the video helpful? Did you get this figured out?

4

Your slider elements don’t have any height set so… it is defaulting to something. Set the height and it’ll work.

1 Like
5

Hey @myonke thanks so much for following up! Yes, the video was helpful. I totally understand now that the containers for my images didn’t have any height so that’s why they looked weird. Thanks again!

1 Like
6

@dram Awesome, thanks for your help!