Grow your CSS skills. Land your dream job.

Select options & tables break mobile layout?

  • # January 17, 2013 at 3:33 pm

    Hi there,

    I have a responsive web site, most of which works fine! When you tilt your iphone the layout rotates and scales up or down accordingly …apart from on 2 pages!

    The first page I think the TABLE element is the culprit. Obviously it can only go so small. If I few the page in portrait view there is extra space to the right. Turning the phone to landscape view all of a sudden makes the page massively wide.

    However, if I load the page in landscape mode it looks fine, as intended. Rotating back to Portrait view gives the same result as before, where you can scroll horizontally on the page.

    The next issue is on a checkout page. Again most of the page works fine but the issue seems to be with the select. I hide the select and the page worked fine. I then gave the select a width of 50% which visually it did – but the layout still broke! I think this is caused by the options within the select are as long as “Democratic Republic of the Congo”. Is there away to stop this happening (without shorting all the options obviously – it is a checkout, the names need to be accurate).

    Any ideas? Thanks in advance,
    Steve

    # January 17, 2013 at 4:01 pm

    If it is an iPhone, yeah sounds about right. I have a similar issue with document widths on my site. Very frustrating. If it is any other browser, it can be hard to see what is happening without an example.

    # January 17, 2013 at 4:44 pm

    You can see an example of the table breaking issue here: http://www.oca-uk.com/subjects/fine-art/drawing-skills-course.html

    For the select you’ll need to click ‘enrol this course’ then click ‘Go to checkout’ on the basket. You should then be able to see it on the next page.

    Cheers!

    # January 24, 2013 at 9:16 am

    I’ve totally hit a wall on these two issues.

    Has anyone come across the same problems or know of any solutions? Really not sure how to resolve this & would really appreciate some help :)

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

You must be logged in to reply to this topic.

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