Streaming live at 10am (PST)

SVG's not loading on mobile view in designer (and on iphone)


#1

Hi Guys,

I'm working on this mobile-only web site (thus there's nothing in the other view modes):
https://preview.webflow.com/preview/dwl?preview=971a567c58db4eeaca1eb92555892983

The problem is that I'm using SVG's that are visible in the designer, but are not shown in the preview mode. Check:

And with preview on:

Now that wouldn't be such a big problem if it's only in designer. But in published mode, there's no change as well, check: [note only mobile view visible]

dwl.webflow.com

I've tried different sizes, as suggested in this topic. However, no luck. Most SVG's are now max 250px width.

I think i've run into a bug here, and i'd very much like to incorporate SVG's over PNG. Is there an easy fix? (Please, i'm a bit in a hurry with a deadline monday)


#2

because they are not there smile your mt-capimg element has only a background, so HTML doesn't draw it, considers it has a size of zero. Put 70px height to your mt-capimg element and your icons will show up.

Webflow shows you the divs in the designer even if HTML would not, because obvious

edit: you would not have faced the problem if you had added the images as images and not as background images of the div.


#3

wow. Rookie mistake. Thx ;D

Good call, i'll do that from now on.

Thx for your help.
edit: Ps. Wouldn't it be nice to give a div a minimum height by default just as the width? Or?


#4

It's not that I mean this is a better practice. There are tons of reasons to prefer background instead of img. Reusing a class is the first reason.

No it would not be nice smiley

Because I for one expect a div to not be given a size when I don't. Webflow does a very good job at respecting HTML and CSS with doing the minimum amount of magic... And all that is a reason I can help you today with your issue, because I'm not looking into Webflow to understand your issue, but in HTML CSS knowledge.


#5