Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Posted by 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 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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
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 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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
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!