Page layout appears zoomed

[sangramrath]

Hello Mark, I have an issue where the page layout appears zoomed (compared to the demo website). I have attached screenshots. The space around the page is less in the local run.

I am cloning the repo and run it without any modifications at the moment (I am exploring if it would fit my use case). I compared a few things and everything is stock, such as padding, grid layout and spacing etc.

It may be something very basic, hence I appreciate your time for this.

Demo Website Screenshot 1

Local Run Screenshot 1

Demo Website Screenshot 2

Local Run Screenshot 2

[markteekman]

Hi @sangramrath! Hmm, that's a very weird issue and hard for me to reproduce. When I run my local setup it looks exactly like the demo. What browser / OS are you using? And does this still apply when you run npm run build and upload the /dist to some server?

[fayazmiraz]

Hello Mark, I have an issue where the page layout appears zoomed

Just to be absolutely sure that there's no silly mistake here: Can you please press Ctrl+0 (on Windows/Linux) or CMD+0 (on mac) on both the local and the web version?

Browsers tend to remember the last zoom setting based on the URL. It's possible that one of those URL is zoomed out or zoomed in within your browser.

[markteekman]

@sangramrath I see there's indeed a difference, as mentioned in the linked issue above. I'll look into a solution when I can make some time.

[saulopaiva]

Hi!

It seams to be related with the order of tailwind base css is import.

Due the css specificity, it's better to import tailwind first and add the site css last.

This commit changes this behavior, and it's part of the Astro upgrade PR: #76.

[markteekman]

Solved in #76, thanks @saulopaiva!

[sangramrath]

Hello @markteekman thank you. I was travelling over the last few months and wasn't actively monitoring my notifications. Also thank you @saulopaiva for the commit and @fayazmiraz.