1

I'm making a responsive website in which I have 3 columns, two of the same width stacked on top of one equal to their added widths. This is my code for these columns:

<div class="container">
                <div class="row" style="margin: 0 auto;">
                    <div class="col-sm-4 custom-offset sellers">
                        <div class="panel panel-default">
                            <div class="panel-heading paneltop"><strong>Event Information</strong></div>
                            <div class="panel-body" style="text-align: left;">...
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 sellers">
                        <div class="panel panel-default">
                            <div class="panel-heading paneltop"><strong>Authorized Ticket Sellers</strong></div>
                            <div class="panel-body" style="text-align: left;">...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="col-sm-8 custom-offset sellers">
                    <div class="panel panel-default">
                        <div class="panel-heading paneltop"><strong>Where Do the Proceeds Go?</strong></div>
                        <div class="panel-body" style="text-align: left;">
                            ...
                        </div>
                    </div>
                </div>
            </div>

When I resize the window without DevTools open/set to Responsive, my columns wrap and stack on top of each other, as they're supposed to. For instance, if I resize my window to roughly ~480px wide, the columns stack on top of each other with a bit of padding in-between. However, when I open DevTools and set my device to iPhone 6 Plus (with a width of ~415px), the columns stay in the 2-on-top-of-1 format that they were originally in.

Why do resizing the window and going Responsive on DevTools behave differently? I feel like pictures would get my point across much better, but I don't have that option as my reputation is a bit low.

Any help is greatly appreciated!

Trevor Yokum
  • 152
  • 1
  • 10
  • 1
    Maybe you do not set proper `view-port` metadata and DevTools simulates DPI and resolution different than just simply resizing window? – Justinas Sep 07 '16 at 19:24
  • @Justinas perfect! Thank you so much. That's exactly what I was looking for and I had completely forgotten about the tags. Awesome. Doots to you. – Trevor Yokum Sep 07 '16 at 19:28
  • Check the viewport like Justinas said, but also realize that using developer tools for different phones/tablets isn't perfect. I have things in production that look different than what they did while testing with developer tools mobile view. You can check the bootstrap docs here: [http://getbootstrap.com/] You could also use a media query to force the elements to become block at that width. good luck! – john_h Sep 07 '16 at 19:30
  • 1
    @john_h It actually was 100% the tag that Justinas suggested; I had learned about those in school a few years back and totally forgotten. Thank ya! – Trevor Yokum Sep 07 '16 at 19:31

0 Answers0