[ad_1]
Hello all,
I made a website about a week ago. It looked fine in my HD monitor. Then i checked in my 14inch laptop, all fine. My sister also sees it fine. However, to my surprise, on my work PC (Dell) it looks completely messed up.
What may have caused this?
Is there a way to know if it looks messed up in other pcs?
More importantly, how to fix it. the website is [pintachile.cl](http://pintachile.cl)
thank you
[ad_2]
Your site seems pretty much ok on my side. Checked on Microsoft Edge.
Have you tried other browser on the work PC ?
The problem entirely stems from how you’re using absolute and relative positioning.
The navigation looks messed up – it’s layered on the title. It looked messed up to me in both Chrome and Edge. Upon closer inspection, the problem seems to stem from how you are using **absolute** positioning. Please keep in mind that setting it incorrectly actually will make it look different from browser to browser. This is because browsers render incorrect absolute positioning differently from each other.
`@ media (min-width: 921px) {`
`.ast-theme-transparent-header #masthead {`
`position: absolute;`
`left: 0;`
`right: 0;`
`}`
`}`
.site-header {
z-index: 99;
~~position: relative;~~
}
I had to put a space between the @ symbol and media because it was posting incorrectly here (so disregard the space).
When I go to the “inspect” tool on your page, I noticed it. I toggled absolute positioning off, it then looked fine. I am not sure what you’re trying to do with absolute positioning. Even in mobile view it looked messed up having it set as the following:
@ media (max-width: 921px) {
.ast-theme-transparent-header #masthead {
position: absolute;
left: 0;
right: 0;
}
}
On top of that there is a conflict here because you have two different media queries (one for min width and one for max width that are basically trying to do the same exact thing).
In short, you have issues with your CSS elements and classes. That’s where the problem stems from. Using absolute positioning is considered the “poor man’s” shortcut to CSS styling, and there are better (and safer) ways to achieve a desired positioning on an element. Some themes use absolute positioning, too, but the problem is that the moment you tinker with it, you can break it, if you don’t know what you’re doing.
Doesn’t look good from my end. Opened it in Chrome, Edge and Opera, all appeared screwed.
Aside the absolute positioning and CSS issues suggested by another user, I want to ask if you use any cache plugin on the site?