zenith sequoia
My Web app is not responsive after deploying, It looks perfect on my chrome dev tools but when i deployed it and opened it on my phone it looks horrible and tried on multiple phones and some worked some faced the same problem as mine and i can't find the solution for it..
https://github.com/YznAlqadery/URL_Shortener Github link
https://url-shortenerz.vercel.app/
hollow urchin
can you be more specific, what's the problem?
zenith sequoia
this is how it looks on my phone
and other phones looks good
and chrome dev tools looks good
hollow urchin
hmm i have no idea. It looks as if the media queries are ignored by your mobile browser
zenith sequoia
yeah i cant seem to find a fix for that
hollow urchin
also, there's something weird with the way you've written them. For example, if you use a screen with width <=375px, every single media query will run.
but a layout for a small screen is less complex than a layout for a large screen
so why is there more css for small screens?
hollow urchin
hmm maybe try changing the way the query is written? So write @media screen and (max-width: 375px) for example
probably won't make a difference though
zenith sequoia
i just opened the link on my friend’s phone and it looks perfectly fine
zenith sequoia
yeah and i can’t find where the problem is
zenith sequoia
it’s good that it works on other phones i just wanna know why with my phone it’s doesn’t 😂
hollow urchin
tried clearing cache?
zenith sequoia
how do i do that
hollow urchin
it should be in the phone settings for this specific app
it's under settings -> apps -> the browser on my phone
there's a "storage & cache" option there
zenith sequoia
still the same :/
hollow urchin
may i propose something different. In the html file, you write something like <meta charset="UTF-8" />. Try removing the /> and use both opening and closing tags
so <meta charset="UTF-8" /> would simply become <meta charset="UTF-8">
it could be that the browser does not like the last /
and you don't really need it anyway
also, do fix the html errors, these might play a role too
h3 elements are not allowed as child of ul
and there should be only one h1
elder pebble
DId you include in the html <head> element <meta name="viewport" content="width=device-width, initial-scale=1">
pastel dagger
@zenith sequoia try max-width instead of width <= in your media queries. The <= syntax is not yet supported by all browsers.