473,321 Members | 1,748 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,321 software developers and data experts.

Flexable columns in Safari and iPhone Chrome

KeredDrahcir
426 256MB
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
  1. <div id="content">
  2.            <div class="left">
  3.                LEFT CONTENT
  4.     </div>
  5.  
  6.     <div class="content">
  7.         MAIN CONTENT
  8.     </div>
  9. </div>
The CSS that sets the values for these blocks on screens of 980 pixels and larger:
Expand|Select|Wrap|Line Numbers
  1. #content {
  2.     clear: both;
  3.     margin: 0 auto;
  4.     width: 980px;
  5.     display: inline-block;
  6.     min-height: 600px;
  7. }
  8.  
  9. .content {
  10.     float: left;
  11.     min-height: 500px;
  12.     padding: 10px 10px 0 10px !important;
  13.     width: 742px !important;
  14. }
  15.  
  16. .left   {
  17.     float: left;
  18.     padding: 10px 2px 0 10px !important;
  19.     width: 202px !important;
  20. }
The code which control the columns at the correct browser size is:
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. @media (max-width: 632px) {
  4. #content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
  5.    .content { width:583px !important; min-height: 0;}
  6.    .left { width:583px !important;}
  7. }
Any help would be much appreciated.
Apr 2 '14 #1
1 1624
KeredDrahcir
426 256MB
Can't anyone help me?
Apr 8 '14 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: RobG | last post by:
On Jun 20, 11:44 am, Jonas Smith <jonas.sm...@yahoo.comwrote: Try the iPhone dev group: <URL: http://groups.google.com.au/group/iphonewebdev > --
21
by: Stevo | last post by:
Look at the userAgent string: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13 It's based on a Safari so it'll suck. Time...
0
by: =?Utf-8?B?UGF1bCBIYWxl?= | last post by:
Is it possible to get webparts dragdrop working within the above browsers? And if not, why not? My research shows that this functionality was originally introduced back in a May 2006 Futures...
2
by: pedalpete | last post by:
I know this doesn't sound right as how can php be different in safari vs ie/ff, but i've been updating a genre list on my page to a tag cloud. When submitting the form using ie/ff the tag is sent...
6
by: liketofindoutwhy | last post by:
It seems that iPhone 3G will not show the scrollbar for the following simple page: http://www.0011.com/html/test-iphone.html so if you are looking at the page using an iPhone, then you are...
1
by: Gregor Kofler | last post by:
Setting the tabIndex property an element makes it focusable and attached key listeners respond. Or so it seems... This procedure works in - from what I've tested - IE6+, FF, Opera. However,...
1
by: npm | last post by:
Hi I've checked out this page (and it works fine) in FF, IE, Opera, Chrome and Safari: http://www.w3schools.com/dom/tryit.asp?filename=try_dom_list_loop But when I try and tweak it for a site...
2
by: ozalkl | last post by:
hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone. i would like to share with you my experience in developing multiple dependency selection...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.