Streaming live at 10am (PST)

Preview looks different to designer

Hi, I’m creating a website in webflow, I designed the look of the website in adobe illustrator and exported the artboard as an SVG, they align correctly as you can see in the designer but when I hit preview it jumps out of line, is there a solution for this?

I will share screenshots and link to site.

https://preview.webflow.com/preview/envy-designs?utm_medium=preview_link&utm_source=dashboard&utm_content=envy-designs&preview=887c2c9099c2cbd07d299f7c96307342&mode=preview

Your image (background-position) is set as “cover”, and your designer view is smaller (in width) than the live version or preview mode (because of the tools on the side of the page).

Set it to a fixed width to get the exact same result when you switch from Designer to Preview mode.

Hi, thanks for your feedack, I changed them both to fixed and the second section dissapears? why is this?

when i change the background image to fixed the website just scrolls like a parrallax effect

i managed to fix it but in preview, it doesn’t cover the full width, is there a way to fix this ?

I didn’t mean you used position:fixed, just a static width in px (I’ve named background-position instead of background-size, my bad).

You should learn about what “cover” does. Cover will make your image “as big as possible”, even if your image gets cut at some point, because it keeps your image’s aspect ratio.

Let’s say you’re trying to fit a 200x100px image into a 100x100px container, and let’s say you center your image. Your image will be maxed out at 100 height, but you will lose 50px on the left and 50px on the right, cut off by the left and right edges of your container.

You should spend a little more time about learning how CSS works though. Your methodology is wrong. I mean it is not “wrong” because it’s doable and there’s always many way to do something but with what you have in mind you should really start again from scratch.

Divide your big images in more manageable blocks, so you have more control over them.
I’m attaching a small image of what you “should” at least try to do with your layout.

From background to foreground :

  • A big image with your background (let’s say your blue gradient)
  • Three divs
  • In your divs, three images (your icons)

Good luck with all that !

Thanks man, your right I was just trying to cheat and save myself time!