Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS My first contract! Looking for guidance on Liquid layout. Almost done! Re: My first contract! Looking for guidance on Liquid layout. Almost done!

#97309
Schot
Member

Could someone have a look at my layout. I’ve been at the same problem for days and I think I’m losing perspective. I could use some fresh eyes please!

The problem is that I’m using @media queries to ensure my bottom right position:absolute cloud graphic does not overlap the top menu or the right side links. This works great in Firefox and IE but oddly not in Chrome or Safari.

http://yodoughcookies.com/prestashop/homepage.html

1. In normal Zoom and Zoomed out all the way, view the layout in fullscreen using FF or IE

2. Now “restore/un-fullscreen” your browser

3. Grab the corner of the browser and compress the browser window

4. Notice that the cloud shape will stop and lock in place at the upper and left side when the window becomes too small

Now try the same thing with Chrome or Safari. In those browsers the point at which the cloud will lock in place is far off the mark, resulting in the cloud overlapping other elements and killing the layout.

Why is there such a difference? I just can’t seem to figure it out.

EDIT: Added an extra step for zoom…