Forums

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

Home Forums CSS Help with layout – resize problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #174084
    matthisco
    Participant

    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

    #174088
    MDMueller
    Participant

    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

    #174092
    matthisco
    Participant

    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?

    #174100
    MDMueller
    Participant

    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;
    }
    #174109
    matthisco
    Participant

    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?

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.