UI looks zoomed in
I designed my UI in figma but when I built it out in css it looks zoomed in and zooming out the browser window to 90% actually makes it look really good. This seems to be a common occurence for me can anyone tell me how to remedy it so that it looks like 90% zoomed out by default
27 Replies
are you using rems for the sizes? and are you viewing the layout at 100% zoom in figma, when you make it?
it sounds like you arent, probably because of the sidebar
if you REEEEEEEEEEEEALLY want to do the barbaric eay and change the zoom, just use
zoom: 0.9
it should still be supportedHey @ἔρως thanks for the reply I don’t want to do the barbaric thing 😭. Will just decreasing my sizes by a bit across the board do the same thing? I am using tailwind so I can change the root spacing and font variables
probably, but it doesn't sound to be the root of the problem, but a band-aid for a mistake
Did you use vite? This (picture) css that comes with it always throughs me off.
Can you deploy it and share the link or make a codesandbox?
I am not really a UI designer but just doing it as a part of my backend the best of a bad bunch
I unfortunately don't think I can because the codebase is in work not belong to me
and that is why i think it was a simple honest mistake, and fixing it is the best
Hm idk if it’s the issue since you’re saying it looks zoomed in not zoomed out but double check you have the meta viewport tag in your html head
<meta name="viewport" content="width=device-width, initial-scale=1">
I never heard of the zoom property ! Very interestingI’m surprised I’ve never come across it for these product image magnification effects , I went through a couple tutorials last year ; I wonder if zoom would be helpful for it and if not what’s a usecase where zoom would make sense these days
https://www.youtube.com/watch?v=E-dekdL0BOs
CodingDesign
YouTube
E-commerce Website Product Image Magnifier On Mouse Hover | No jQuery
Let's learn how to Magnify Images with the help of JavaScript. We won't be using any plugins. This feature is mostly use to zoom product images on an e-commerce website when you hover your mouse on product's image. So let's build this product image magnifier with HTML,CSS & JavaScript.
Subscribe my channel for more helpful video...
it might, but it relayouts too, which can have interesting side effects
Oh yikes yeah for this use case would not be great then
actually, it would
scale doesn't re-layout and just makes things visually smaller or biggerYou're saying
zoom would be good for this use case even though it relayouts ?that is exactly why it is the solution, compared to scale
Sounds like it would be heavy on performance to recalculate layout anytime the use moves their x,y on the image though ? What am I missing?
In my demo I think I just made the image width 3x (instead of using scale) and then moved the background or object position around depending on where the cursor was.
What interesting side effects were you thinking of ?
well, it resizes everything
scale keeps the size of elements, but scales visually
https://jsfiddle.net/w2ucqzhn/ <-- check this out
they behave differently:
- the zoom relayouts
- the scale does whatever it does
Gotcha , thanks! Very interesting I love coming across new/old properties
it is interesting
but it's still barbaric to use it to fix a possible issue with copying the styles from one side to the other
or the artboard was the wrong size initially
Yea I could def see it being used in the wrong way but there’s gotta be some use cases … or maybe the use cases are so few and that’s why no one uses it😆
make ie5.5-8 behave, if you use
*zoom: 1 when it decides to do not re-layoutwhat's good to use em or rem ?
yes
both?
also should I avoid px as max as I can ?
no
all units have their use
like ?
can u explain more
still didn't get the point
kevin made a diagram for that
if you want a better answer, it's best to ask in either #discussions or #front-end , depending on what a moderator thinks
please don't hijack other people's posts. If you have a related question, open a fresh message unless it's very specific to the question already being answered (for the record, this isn't).
definitely #discussions. #front-end is only if you have some code someone needs to look at