Website looks different on different Browsers?
Answered
Spectacled Caiman posted this in #help-forum
Spectacled CaimanOP
I have this website that I've been working on for a little bit and my issue is that the website looks good on all browsers when its on iPad and larger screens but as soon it comes to mobile and the site is visited through Chrome browser the layout is all messed up.
This is what it looks like on different browsers. These two are taken on the same device but one is on Safari the other one is on Chrome.
This is what it looks like on different browsers. These two are taken on the same device but one is on Safari the other one is on Chrome.
Answered by Turkish Van
After getting a bit dipper into it, I found where is the issue coming from.
Go into Inspect elements > Console and type:
I assume You are using tailwind CSS so it will list all the elements with tailwind CSS class
There is 14 elements. The ones that are causing the problem are 1, 11 and 13.
Go into Inspect elements > Console and type:
document.querySelectorAll(".absolute")I assume You are using tailwind CSS so it will list all the elements with tailwind CSS class
absolute.There is 14 elements. The ones that are causing the problem are 1, 11 and 13.
15 Replies
@Spectacled Caiman I have this website that I've been working on for a little bit and my issue is that the website looks good on all browsers when its on iPad and larger screens but as soon it comes to mobile and the site is visited through Chrome browser the layout is all messed up.
This is what it looks like on different browsers. These two are taken on the same device but one is on Safari the other one is on Chrome.
Turkish Van
It might be the same look and the same layout, but on Safari it might be zoomed in.
Try sliding left or zooming out on Safari.
That might be the case.
Try sliding left or zooming out on Safari.
That might be the case.
Ye sefari be doing whacky stuff
@Jboncz Ye sefari be doing whacky stuff
Turkish Van
So, I guess that was the case?
Idk wasnt my question lol just commenting cause I agree.
Spectacled CaimanOP
oh shit ur right
what should I do?
Do I use grid or flex to center it? because the issue is only for the home page
@Spectacled Caiman Do I use grid or flex to center it? because the issue is only for the home page
Turkish Van
I don't think the issue is about it not being centered. Most likely, there is an element which messes up Your page responsiveness.
Try entering Inspect elements where You should probably see that the body width is not equal to the screen width at certain
Try entering Inspect elements where You should probably see that the body width is not equal to the screen width at certain
viewport. If that is the case, try looking for the element whose width is greater than the body width on smaller viewport.@Turkish Van I don't think the issue is about it not being centered. Most likely, there is an element which messes up Your page responsiveness.
Try entering Inspect elements where You should probably see that the body width is not equal to the screen width at certain `viewport`. If that is the case, try looking for the element whose width is greater than the body width on smaller `viewport`.
Spectacled CaimanOP
I see, okay thank you very much! I have a quick question tho real fast. Would it also solve it if I do that thing in html where I set the viewport ratio to something like 1.1
@Spectacled Caiman I see, okay thank you very much! I have a quick question tho real fast. Would it also solve it if I do that thing in html where I set the viewport ratio to something like 1.1
Turkish Van
If Your question is regarding would the stated problem exist on 1:1
viewport after You found an element and fixed its width, well, if that was the only problem in Your website responsiveness, it shouldn't.@Turkish Van If Your question is regarding would the stated problem exist on 1:1 `viewport` after You found an element and fixed its width, well, if that was the only problem in Your website responsiveness, it shouldn't.
Spectacled CaimanOP
Nah I haven't found an element that exists the screen or has larger width than the actual screen. However, I do have this component that sticks out on medium devices not small. However, here is the site if you think that the issue could be lying somewhere else: https://www.profilee.io/
I really do appretiate your help!
I really do appretiate your help!
@Spectacled Caiman Nah I haven't found an element that exists the screen or has larger width than the actual screen. However, I do have this component that sticks out on **medium** devices not small. However, here is the site if you think that the issue could be lying somewhere else: https://www.profilee.io/
I really do appretiate your help!
Turkish Van
After getting a bit dipper into it, I found where is the issue coming from.
Go into Inspect elements > Console and type:
I assume You are using tailwind CSS so it will list all the elements with tailwind CSS class
There is 14 elements. The ones that are causing the problem are 1, 11 and 13.
Go into Inspect elements > Console and type:
document.querySelectorAll(".absolute")I assume You are using tailwind CSS so it will list all the elements with tailwind CSS class
absolute.There is 14 elements. The ones that are causing the problem are 1, 11 and 13.
Answer
Griffon Bleu de Gascogne
unrelated but may I ask what font are you using for your website? 😅
@Turkish Van After getting a bit dipper into it, I found where is the issue coming from.
Go into Inspect elements > Console and type: `document.querySelectorAll(".absolute")`
I assume You are using tailwind CSS so it will list all the elements with tailwind CSS class `absolute`.
There is 14 elements. The ones that are causing the problem are 1, 11 and 13.
Spectacled CaimanOP
Thank you so very much man! it works! Is there anything I can I do for you? Like a buymeacoffee or help with something?
@Griffon Bleu de Gascogne unrelated but may I ask what font are you using for your website? 😅
Spectacled CaimanOP
Not a problem, Inter