Grow your CSS skills. Land your dream job.

Width problems on mobile site

  • # December 20, 2012 at 4:15 pm

    I have a page styled for mobile devices that when viewed in a desktop browser window re sizes fluidly, but on a mobile device it doesn’t fill 100% of the width there appears to be somthing to the right of the page-container div. Could someone look at the css to see if I am missing something simple?

    https://edit-wwwprep.rose-hulman.edu/admissions-financial-aid.aspx

    # December 20, 2012 at 5:02 pm

    The width looks fine on my HTC ONE X but there are other issues.

    # December 21, 2012 at 1:05 am

    Hey svoltmer
    There are some issues on my iPhone 4. But, in the viewport meta tag I always only have this:

    meta name=”viewport” content=”width=device-width, initial-scale=1″
    Not sure if “maximum-scale=2″ affect the view…

    There is also a red border around the search field which expands outside the content area to the right. I should remove that and see if it solves the problem (div id search-box: border).

    // Magnus

    # January 3, 2013 at 2:59 pm

    Magnus,
    The border was for testing and the home screen looks fine with the viewport set the way I have it. Take a look.

    https://edit-wwwprep.rose-hulman.edu/

    # January 3, 2013 at 3:06 pm

    @magnus_vb – How come you use maximum-scale=2 ? That means users who want to zoom on an iPad for example, won’t be able to go beyond 2x. I always avoid min/max scales for accessibility.

    # January 7, 2013 at 4:36 pm

    I removed the maximum-scale Andy. Do you have any suggestions as to why my mobile content is not full width on this page? I could use some suggestions-I can’t find anything.

    https://edit-wwwprep.rose-hulman.edu/admissions-financial-aid.aspx

    # January 15, 2013 at 10:43 am

    Bump..
    Anyone know why there is a huge space to the right of my design? I am desperate!

    https://edit-wwwprep.rose-hulman.edu/admissions-financial-aid.aspx

    # January 15, 2013 at 11:59 am

    I think the big empty area on the right is because you have overflowing elements (the search-field) . if you put `overflow:hidden;` on the pagewrap with a width of 100% you should get rid of that problem.

    # January 17, 2013 at 8:55 am

    Thanks Carl! That did the trick. I cannot believe I forgot the overflow:hidden.
    One other thing though, On the navigation when you click on it the search bar drops with the ul and I would prefer it staying in the grey bar at the top. It is floated right or I would just absolutely position it. Any suggestions again would be greatly appreciated.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".