0

I'm using a simple bootstrap template. Columns seem to be stacking on mobile the way I'd like, except on iPhones. Responsive checker, resizing screen shows correctly. All of our android phones, tablets, and iPads show correctly. But on any iPhone, it just shows a smaller version of the desktop site.

I have the viewport meta tag in place, and the links to BS CSS, jQuery, and JS files. I've tried using the col-xs and col-s classes at full-width, but nothing seems to be working. I just want the columns stacking on top of each other instead of side by side on mobile. 

<div class="row">
    <div class= "col-md-4">
    <h3>This promotion can be snowballed into several months making you truckloads of cash.  I would call the press and let them know what you’re doing.  They love a good story.  Make sure you tally your votes and make a big deal out of it. Get your staff involved.</h3> 
    </div>

   <div class= "col-md-4">
   <h3>Post the results in your business, on your website, in your newsletter so many ideas.  Make outlandish campaign promises.  Have mock debates.  There are so many possibilities using this theme.  Main thing is to have fun with it!  Your customers will love it.<br>Who knows? You might even win!</h3>
   </div>

   <div class= "col-md-4">
   <h3>We can customize your offer to whatever you want.  And we can help you choose the offer that works best for your business from the thousands of promotions we have done helping businesses just like yours increase their sales</h3>
   </div>

</div><!--End Row-->
Goodbye StackExchange
  • 21,680
  • 7
  • 47
  • 83
Berserkerchick
  • 11
  • 5
  • Well, per Bootstrap, _If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line._, so, I would think that using class="col-xs-12 col-md-4" would stack on top of each other on mobile and would display 3 columns on desktops > 992px. – Chris Yongchu Aug 08 '16 at 19:55
  • That is what I thought too, but did not work for me. It's showing it in desktop mode. All other mobile devices are working correctly, just the iPhone 6 I'm testing it on is not working. – Berserkerchick Aug 08 '16 at 19:59
  • I've you've already done that and also added `` to your page, it should work. If it's only an issue on the iPhone 6, not sure what it could be. Good luck. – Chris Yongchu Aug 08 '16 at 20:08
  • Check out this post. http://stackoverflow.com/questions/9386429/simple-bootstrap-page-is-not-responsive-on-the-iphone – Chris Yongchu Aug 08 '16 at 20:11
  • Yep, meta tag is there. That's why this is irritating me so much. By all accounts this SHOULD work. And it makes no sense why it's working perfectly on all other devices. Thanks for trying. I'll keep pulling my hair out over here ;) – Berserkerchick Aug 08 '16 at 20:43
  • Ok...so I just figured out that the problem is coming from the domain redirect with mask. Redirect is putting the site into iframes so it's not registering the viewport. – Berserkerchick Aug 08 '16 at 22:24
  • Ah, makes sense. Well done. – Chris Yongchu Aug 08 '16 at 23:45

1 Answers1

0

Ok...so I just figured out that the problem is coming from the domain redirect with mask. Redirect is putting the site into iframes so it's not registering the viewport.

Berserkerchick
  • 11
  • 5