Divs NOT showing img Element on Front End

[BraybrookeWebDesign]

Hello Support.

I have had this before, I have made section called quick Cards on my web design. The column displays a DIV on top set to background Lower Img / Image Tag. then the bottom div has the information. However When I view it on the front end the image div disappears, what am I doing wrong?

[prakash_s]

Hello @BraybrookeWebDesign,

Thanks for writing to us.

I checked your site, and it appears you haven’t set a static homepage yet. Go to Settings → Reading in your WordPress dashboard, then under “Your homepage displays,” select “A static page” and choose your homepage from the dropdown.

Since no homepage is set, WordPress defaults to showing posts—but with no posts published, you only see the header. Setting the static homepage will fix this immediately.

Hope it helps
Thanks

[BraybrookeWebDesign]

No, you are not answering the question! I don’t need to set a home page for it to show pictures in the DIVS, this is completely off topic! Please look at the page “Home” in cornerstone. You will see the the three Quick cards in question. When you view the page in the builder the pictures show, when you “View On Front End” They dont. I am completely aware there isnt a home page set yet.

[christian]

Hey there,

Please check the screenshot of your home page in the secure note and tell us or mark the Div you’re referring to. When reporting issues to us, kindly provide details where we can find issue in order to avoid confusion.

Thanks.

[BraybrookeWebDesign]

I am not being funny, but this quite painful… There is a page in the builder clearly named “Home” as I have said in my previous communications. If you click on that in the builder you will see the DIVS I am talking about. The section is called QUICK CARDS. It is literally the only page!

https://braybrookew28.sg-host.com/home

[christian]

You set the image as a background of the Div but the Div is empty that’s why it’s collapsed. In the builder, it doesn’t collapse because of the drag and drop area.

Add a Gap element inside the Div and set he Gap Size to vw unit like 25 vw.

[BraybrookeWebDesign]

Ok, I can do this, but I thought the whole point of the image / tag is to tell the div there is an image in there, or am I mistaken?

[christian]

Even if it’s set to , because it’s a background feature, there’s CSS that makes it behave like a background. Backgrounds don’t fill up the space so the Gap is needed. The Background & Gap method has an advantage and that is keeping an aspect ratio different from your image. For example, setting the Gap Size to 25 vw creates a “squareish” area which looks like is cropping your image into a square.

If you need the image to fill up the space by itself, you can remove the image as the background and use the Image element instead of the Div.