3

I have a flexbox set up as follows: 

.box-1 {background: #e51400;}
.box-2 {background: #fa6800;}
.box-3 {background: #f0a30a;}
.box-4 {background: #e3c800;}
.box-5 {background: #a4c400;}
.box-6 {background: #60a917;}

.box {
    font-size: 50px;
    color: white;
    padding: 10px;
    width: 300px;
    height: 300px;
        
  }

/*  LAYOUT STYLES */
.container {
  display: flex;
  border: 8px solid black;
  height: 80vh;
  width: 80vw;
  flex-wrap: wrap;
  flex-direction: row;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <main>
        <section class="container">
            <div class="box box-1">1</div>
            <div class="box box-2">6</div>
            <div class="box box-3">3</div>
            <div class="box box-4">4</div> 
            <div class="box box-5">5</div>
            <div class="box box-6">6</div>
          </section>
    </main>
      
</html>

I would expect the boxes to wrap around and create new rows when I shrink the width of the page. This does happen, but only when I use Firefox's Responsive Design Mode with "Touch Simulation" disabled:

enter image description here

However, when I run this with touch simulation enabled (seems like this is the default), or I use Chrome's developer tools, the boxes remain two to a row and just shrink in width:

enter image description here

(Sorry, I don't have enough reputation to embed images)

Why is this happening?

EDIT: Accepted Rene van der Lende's answer below.

Other resources:

Related SO thread with html to disable this behavior on mobile

Youtube video explaining meta viewport

Jack Trowbridge
  • 43
  • 5

1 Answers1

1

In simulation mode the browser scales down your webpage as if it were on a specific mobile device. In 'normal' mode, your entire browser viewport is used, but clipped/restricted to the selected device without scaling down. Think large browser window versus a small one...

So, the behaviour you see is correct!

Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25
  • Thank you! I found [this](https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page) thread which gave me tihs: `` The flexbox is working as in the first gif. Is this sort of thing often used in responsive web pages? – Jack Trowbridge May 15 '20 at 14:24
  • 1
    Not sure which of the two behaviours you mean, but in mobile mode things get scaled down to emulate a small device showing you how your page would look like on a smartphone. Just upload your page somewhere (local server?) and open it on your smartphone to have a look. – Rene van der Lende May 15 '20 at 14:26
  • Sorry, I'm not going to check code from other pages you may have found and answer secondary questions based on that content. Of course, you can always post another question on SO when you encounter new problems. – Rene van der Lende May 15 '20 at 14:33