CODEWITHSUNDEEP
htmlcssiphonesafarimobile-safari
Richard Young
Richard Young

Reputation: 462

Getting flexible columns working in Safari and iPhone Chrome

I am trying to create a mobile responsive template. I am using the CSS media to find the browser width and it's working fine in most cases. I want however on a device where the left column will take up too much space for it to jump below the main content on the right.

The solution to get the left down was to use flexible columns to reverse the flow. This works fine in Firefox, Google Chrome, Internet Explorer and Opera on a desktop. It doesn’t work on Google Chrome on an iPhone and doesn't work in Safari either on a desktop or iPhone. In both cases the left column appears above the right column. It works on my friend's Android.

This is the html: Expand|Select|Wrap|Line Numbers

<div id="content">
    <div class="left">
        LEFT CONTENT
    </div>

    <div class="content">
        MAIN CONTENT
    </div>
</div>

The CSS that sets the values for these blocks on screens of 980 pixels and larger: Expand|Select|Wrap|Line Numbers

#content {
    clear: both;
    margin: 0 auto;
    width: 980px;
    display: inline-block;
    min-height: 600px;
}

.content {
    float: left;
    min-height: 500px;
    padding: 10px 10px 0 10px !important;
    width: 742px !important;
}

.left   {
    float: left;
    padding: 10px 2px 0 10px !important;
    width: 202px !important;
}

The code which control the columns at the correct browser size is: Expand|Select|Wrap|Line Numbers

@media (max-width: 632px) {
   #content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
   .content { width:583px !important; min-height: 0;}
   .left { width:583px !important;}
}

Any help would be much appreciated.

Upvotes: 0

Views: 363

Answers (1)

Isaias Soares
Isaias Soares

Reputation: 111

I used your code to simulate locally. It appears to work just fine on Safari (for Mac, at least). Isn't this the expected behavior? Can you provide images or further details?

Your code running on Safari. Main Content is ABOVE left

It isn't related to your question directly, but I guess you'd better use percentage width instead of raw pixels. If you don't want divs to save a distance between them, you should use margin-right (or left).

Upvotes: 2

Related Questions