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

Bolivar Arguello
seal-mask
.a{fill-rule:evenodd;}techdegree
Bolivar Arguello
Front End Web Development Techdegree Student 9,429 Points
Posted by Bolivar Arguello
.a{fill-rule:evenodd;}techdegree
Bolivar Arguello
Front End Web Development Techdegree Student 9,429 Points

why it does not work when I use "inspect element" on google chrome?

greetings,

So, when I toggle to different screen size (iphone6, iPad pro, galaxy S5) on developer tools, the grid does not react at all unless I resize my window, the final goal is to make the grid go from 3 columns to 1 column and vice-versa as I change the screen size. thanks in advance for the help provided.

.grid{ max-width: 800px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) ; /* same as 200px 200px 200px*/ /setup width of each element/ grid-template-rows: 100px 200px; /setup height of each element/ grid-gap: 15px 20px; }

1 Answer

Jacob Thompson
Jacob Thompson
7,017 Points
Jacob Thompson
Jacob Thompson
7,017 Points

For you to select the screen size manually in dev tools, you would need the device options set to responsive and that allows you to edit the width and height manually. Just type in the required width and press enter to activate.