Media Query and ratio Help!

[jcastejon]

Hi!
I’m new on this css and responsive design, here is my problem:
I did a website (responsive) and to be my first one is ok, when I see it in almost any monitor works great, BUT, my cliente have a toshiba PC 13.3″ 1366px x 768px monitor and when he saw the website goes crazy!, nothing work the way that supouse to be, so I been trying to create a media query for this kind o monitor I tryed width 1366px, 16:9, 1.77, 16/9 as ratio options and doesn’t work. if I use 16/10, works! but change the regular monitors view!

Can anybody help me?

Thanks!

[Atelierbram]

Can you post a link to the live website?

[jcastejon]

Hi!

sure!

http://www.dialtradeinc.com/v1/index.html

thanks!

Right now have the css @media (device-aspect-ratio: 1.77)
that was my last try

[Atelierbram]

Lots of elements with position: fixed for aesthetic reasons: this will come back to bite you. Specially with that banner, on PC’s with little vertical space this will not work at all.

Why not remove the position: fixed on .banner?

[jcastejon]

Thanks!

that’s because my client wants to see all the time his banner, if I remove the position:fixed this will move when the page made the scroll.

So I been looking to give a css rule when the particular monitor (1366×768) change the banner image for other less height, but I can use the less height in the other monitor because doesn’t have much info.

I mean, if I use a less height banner will have to much white space

[Atelierbram]

Print the banner out, frame it in and hang it high on the wall of that person’s office, so they can see it all the time, because right now this is a intrusive user-unfriendly component.

if I remove the position:fixed this will move when the page made the scroll.

Yep. Just do it, and sell it to your client: saying “you can’t have your cake and eat it too”.

[jcastejon]

wooo!

thanks for your advaice Atelierbram.

I guess is the only way.

Thanks for your help.

castejon

[Author]

Posts