Help with layout – resize problem

[matthisco]

Can someone pleas help me with my layout?

If you resize this layout – the logo appears outside of the layout on the right hand side. This causes a scroll bar which is noticeable on the ipad in portrait. Can someone please hlep me make this a centred 960px that snaps to the ipad portrait view with no scrollbar?

Many thanks

Here is my codepen:

http://codepen.io/matthisco/pen/wiDnl

[MDMueller]

This whole site doesn’t seem to be responsive. You shouldn’t just try to fix it for one special device, as there are thousand different devices and screen resolutions.

So you need a concept how the site should behave when the screen gets smaller. By using media queries you may tell the site how to behave if less than a certain amount of px/em is available: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

[matthisco]

Thanks very much for the reply.

I don’t want a responsive site.

I need a centred 960px fixed width layout, which snaps to the portrait view on a ipad. Landscape works fine.

Is it something to do with the viewport meta tag?

[MDMueller]

AFAIK an iPad has a resolution of 1024×768. So there is not enough space left in the portrait view, if your layout is based on 960px => scroll bars.

So either you change your whole layout (using less than 960px), or you use media queries to change the layout only on certain screen sizes.

I’m not sure how u want the site to look, but some fixed width values like this won’t work if only 768px are available:

.fixed-centre {
width: 960px;
}

[matthisco]

Thanks very much for your reply again.

The same thing happens when I resize my browser to less that the fixed width of my site, I get a horizontal scroll bar. If I scroll across I just get the body background color, not the colour of my 100% container div.

I have a screenshot here:

http://www.the-contactgroup.com/email/capture.png

Do I need media querires to fix this?

[Author]

Posts