Problem with flex grid system on iPhone 5s (iOS 9) #22223

Activity

1. mdo commented on Mar 20, 2017

   

   mdo

   on Mar 20, 2017

   Last edited by mdo

   Member

   More actions

   Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

   ---

   This is a saved reply.
2. mdo

   added

   awaiting-replyWaiting on the author; an issue closes after 14 days without replyWaiting on the author; an issue closes after 14 days without reply

   cssSass sources or compiled CSSSass sources or compiled CSS

   on Mar 20, 2017
3. mdo

   closed this as completedon Mar 26, 2017
4. mdo commented on Mar 26, 2017

   

   mdo

   on Mar 26, 2017

   Member

   More actions

   Closed for lack of update and live demo.
5. adamcolpitts commented on Jul 19, 2018

   

   adamcolpitts

   on Jul 19, 2018

   More actions

   still a major problem
6. mebibou commented on Nov 26, 2018

   

   mebibou

   on Nov 26, 2018

   More actions

   I just had the same issue and found this: https://github.com/philipwalton/flexbugs#flexbug-11
   I was using:

   <div class="row">
     <div class="col">
       <img style="width: 200px" >
     </div>
     <div class="col">
       <img style="width: 200px" >
     </div>
     <div class="col">
       <img style="width: 200px" >
     </div>
     <div class="col">
       <img style="width: 200px" >
     </div>
   </div>

   and thought the images would just go on the next line if couldn't fit on one line, but on Safari on an iPhone 5s it would just stay on a single line. Solution was to set:

   .row > .col {
     flex-basis: 200px;
   }

   👍React with 👍2Reacted by Frano Sasvari and Adeniran2020
7. Adeniran2020 commented on Jan 16, 2021

   

   Adeniran2020

   on Jan 16, 2021

   More actions

   I'm glad it worked.