CSS CSS Flexbox Layout Flexbox Properties Distributing Space Inside a Flex Container

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Different display using Chrome Dev Tools?

I am using the exact same code like the one in the Work space (with the difference that I use Sublime for editing). I tried to add media queries to play with flex-direction and I seem to have an issue when testing on different devices with Chrome Dev Tools. This is my CSS:

  .container {

            display: flex;
    flex-direction: column;

            }

  @media (min-width: 769px) {

         .container {

    display: flex;
    flex-direction: row;
       }
  }

If I resize the window browser, the changes are applied. If I am trying to view the page in the Dev Toools, on an iPhone 4 screen for example (320 x 480), the changes are not applied and the flex items appear in a row and not in columns. When I inspect the container element, my width is 866 px. How is this possible?

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 85,050 Points

Do you have a viewport meta tag in your HTML file?

This is what forces to smaller devices like phones and tablets to display the changes in your code

<meta name="viewport" content="width=device-width, initial-scale=1">

This is normally placed in the header part of your document. Include it and your phone should start to work with the media queries.

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Yes, this did the trick. Thx :). So as a general rule I should always use this tag?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 85,050 Points

Always use this tag, or one like it when deploying it for devices.

of course, you don't need it for testing it in the browser as the changes always show up in the desktop/laptop browsers :-)

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Will do :). I just wasn't aware I need this tag for testing with Dev Tools. Thx again!