Visual Studio Code: “Open with Live Server” and “Open with Default Browser” showing different web page

Question

I was working on an html file using Live Server in Visual Studio Code. After I finished, When I opened it with the chrome, I found out all the elements are enlarged. I found out that "Open with Live Server" and "Open with Default Browser" option does not show the same element dimensions.

What I see using "Live Server"

What I see when I open it with default browser (chrome)

Why is this happening? Is there any way to fix this dimension problem without having to write

Answer 1

This goes back to linking to files (Like css,images or etc).
For example, we examine behavior in a css file:

.navbar-brand {
    background: url('../images/logo.svg');
}

when using live server everything is fine. but default browser (without live server) not found logo.svg file.

I think you better check this subject.

Answer 2

I think you should try reloading the file from the default browser chrome because sometimes in chrome it happens that there is a problem and we don't get what we want. I have experienced this many times. So, my suggestion is to restart your computer or refreshing the site