Production CSS
Hey guys I have an issue my deployment , when I use normal safari or other browsers the css is all messed up but if I open up an incognito window it looks as it should, I’ve tested on my phone and my girlfriends phone and confirmed it
Any help would be appreciated
https://hyper-osint.vercel.app
Create Next App
Generated by create next app
21 Replies
Sounds like a caching issue maybe try resetting your cache
So I figured it out it had nothing to do with cache but I found the issue resetting it, I just have ZERO idea how I’d fix this in my code,
For some reason the default size for web on mobile is page zoom 125% once I changed it to 100% my page renders just fine
Wow that's dumb 😂 damn you safari
Is there a way to set up default page zoom to be 100% so that users don’t get this issue ?
I'm not sure but if there was you do not want to do that, terrible UX
If there is a way to change that, I wouldn't suggest it, because that would mean over-riding user settings (like, if a user set theirs to 150% or 85%, you'd be overriding it).
Also, if the page is broken at 125%, but you were able to make the default 100%, what would happen if a user manually zoomed because they found it too small?
@joey_developer you alrady fixed this no? Everything looks good for me
yeah, same I just checked on iPhone and didn't see anything wrong with or without the zoom (also, my wife's iPhone defaults to 100%, as you'd expect, maybe you changed something else on the others that had an affect here 🤷).
I do have some other suggestions if you'd like to hear them 🙂
Yea I fixed it I reduced the initial margin paddings to allow more wiggle room on zoom when the user zooms in, I kinda had to slap myself in the face and understand that I have to separate the design from the users needs and if they need to zoom in and it doesn’t look how I’d like that’s fine
Yes please!
The animation on the buttons is really fast. I find it really distracting. Like, if I'm going to read the text (which, granted, is just lorum ipsum atm), I just have this thing in my vision constantly pulling for my attention.
In looking at how you did the animation, I also noticed they're all links. Because they aren't going anywhere, but instead for doing something, they should be
<button>s.
Overwise, it looks really nice and clean 🙂ok ok ill work on updating that, do you think the hover effect is too intrusive? im not sure if the glow is too harsh on the eyes for the button
yes, it's like a flashbang
yea at first i thought it was cool but now everytime i see it it bothers me a little more everytimeAlways good to push it too far, then dial it back down, often gets you to a good place in the end faster than the other way around.
can also give this div a margin-inline: auto; to look like this
on bigger screens there's alot of white space when it's aligned to the left
yea that makes sense, would keeping it text aligned left still be good if its centered there or should i just align it center as well?
nah, doesn't look that good
im looking at a smaller screen, just make it margin-inline:auto; for every screen size
looks much better
aye aye cpn ty !