I created four social media link boxes, gave them classes and sub-classes and added an image to each one - Facebook etc. I then created a hover stage and added four more images in different colours on the hover stage. It all works perfectly but doesn’t show in preview or when published.
After hunting around I finally found that the element has to be sized for it to appear.
Why? I don’t want to size it! This seems daft.
That’s all normal and that has nothing to do with Webflow. It’s how HTML works.
If an element has no dimension, it shrinks to a zero size and appears invisible. Adding dimensions values, or adding content with dimensions, gives dimension to an element and makes it visible.
In Webflow designer, Webflow gives a minimum, default dimension to elements that have no dimension, in order for you to see them and select them. Anytime an element has this double dashed border, you need to do something for it to catch dimensions.
When you only add background images into an element, it doesn’t affect its dimensions.
So this is neither a wish list (because there is no feature to bring) nor bug (because nothing to fix)…
If you show us your design we can help you to find the best way to do what’ you’re looking to do.
1 Like
Very odd, I didn’t realise that.
The element has an 26px image as part of the class - entered under Image and Gradient not as a separate image (if you see what I mean) - I can’t see how the element is regarded as empty.
I have made it work by giving the class a size, but I’d rather not be constrained like this.
Yes, you add an image as a background which will never have an effect on the element size. If you add an image inside the div, as an image, it will.
HTML sees your element, it looks for height and width value, there are none. It looks for content, there is none. Then it displays the element at 0px.
Thanks Vincent. As I say, very strange.