Treehouse: Grow your CSS skills. Land your dream job.

iPad styling

  • # October 18, 2012 at 6:26 am


    Have a bit of a problem with the following site on the iPad.

    The two main problems are:

    1) The search bar at the top is going over the edge of the top bar. I think it’s actually a case of the top bar not stretching far enough, but I’ve got it set to 100% width so that’s confusing… (same with the footer)

    2) The content is stuck to the left hand side, it needs to have a gap similar to the right hand side.

    Any help would be appreciated.


    # October 18, 2012 at 6:53 am

    You need to set a min-width for your body element.

    Basically I threw in min-width: 1050px; just to see if it works and it’s fine – work out the exact width the elements inside it make and apply that min width and this cut off will stop.

    The reasoning is that your body is set to 100% width, which applies to the viewport (browser area). So if the content overspills that 100% with a gap beyond that 100% width at any point it leaves a space and cuts off the background. You can see this is you downsize the horizontal width of your browser window and then scroll right.

    Setting the min-width cures this problem. Also – I think you might have a couple of div clearing issues, I noticed that the main page container does not clear it’s elements – so might be worth checking out.

    Clearfix method I use here:

    # October 18, 2012 at 7:24 am

    HI Andy,

    Thanks for the quick response, works perfectly. Went for 1040px (20px either side of content). Looks great.

    Have added the clearfix method, if you get a minute please can you check if I have implemented it in the correct places?


    # October 18, 2012 at 8:07 am

    No worries – clearing looks fine now :)

    # October 18, 2012 at 9:43 am


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.