HELP: VSC Live preview is different size to live site

The fonts remain the same size but image size and I guess my margin / padding is smaller on the live site compared to the visual studio code preview.

I don’t know what’s happening. Is it to do with my screen being retina?


[Live site]


[Visual studio code preview]

Hi, could you post the code as well?

Sure, just the CSS?

I’ve had problems with this in every project i’ve done in visual studio code so far.

Yeah, or maybe a live link to a test site if you have?

Are the images in the lower version maybe bigger and therefore make the nav-bar bigger / more of the main image gets covered?

http://benmarshallproduction.com/

It’s the exact same images.

Again, I’m not sure if maybe my retina screen is squishing them and maybe I need to account for that?

On this non-retina display it looks the same :roll_eyes:

That rules that theory out then! :smiley:

which browser do you use ?
Did you try on different browser?

Both the preview and the live site were on chrome. I tried the live site on safari and it’s smaller on there too.

I’m starting to think this is a problem with the visual studio code live server then.

It looks fine for me both for Firefox and Chrome,
yes probably live server is the problem

Problem solved! Every time live preview opened it would be at 125% zoom for some reason! After zooming back out to 100% it seems to have kept this. Finally! This is going to make working a lot easier!

4 Likes

thanks man, had the same zoom issue .finally found out what was going on.

1 Like

ahaha I completely forgot that I was working on a completely different zoom setting for like a month! :rofl:

Glad to hear this experience helped you out though!