# Css grid- responsive problem **URL:** \ **Category:** Curriculum Help\ **Tags:** html, css\ **Created:** [June 22, 2019, 8:02pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376 "2019-06-22T20:02:29Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Suu\_nazmy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suu_nazmy/32/118200_2.png) [@Suu\_nazmy](https://forum.freecodecamp.org/u/Suu_nazmy)\ **Post date:** [June 22, 2019, 8:02pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/1 "2019-06-22T20:02:29Z")
Hi, guys… I stuck with CSS grid, the responsive doesn’t work well so I need help, please. .here’s my link [https://codepen.io/Suzy\_Nazmy/pen/jjqjvb](https://codepen.io/Suzy_Nazmy/pen/jjqjvb) ---
**Author:** ![RohanKumarr](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rohankumarr/32/118199_2.png) [@RohanKumarr](https://forum.freecodecamp.org/u/RohanKumarr)\ **Post date:** [June 22, 2019, 8:17pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/2 "2019-06-22T20:17:52Z")
It would be better to know more about the problem you are facing. So we can give you the precise solution you need. 🙂 ---
**Author:** ![Suu\_nazmy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suu_nazmy/32/118200_2.png) [@Suu\_nazmy](https://forum.freecodecamp.org/u/Suu_nazmy)\ **Post date:** [June 22, 2019, 8:22pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/3 "2019-06-22T20:22:13Z")
@RohanKumarr The responsive doesn’t work. I am using Css grid for the first time so I feel little confused. I don’t know in which class should I type grid. **Am I clear** ---
**Author:** ![snowmonkey](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snowmonkey/32/241579_2.png) [@snowmonkey](https://forum.freecodecamp.org/u/snowmonkey)\ **Post date:** [June 22, 2019, 8:36pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/4 "2019-06-22T20:36:32Z")
In large part, the “responsive” may be having issues, because you’re using fixed sizing on the individual ‘.choice’ elements - and each is being overridden by more specific styles. A great introduction to grids is on the MDN (a standard reference in the industry, the mozilla developers site), or on devdocs ([https://devdocs.io/css/css\_grid\_layout/basic\_concepts\_of\_grid\_layout](https://devdocs.io/css/css_grid_layout/basic_concepts_of_grid_layout)) ---
**Author:** ![Suu\_nazmy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suu_nazmy/32/118200_2.png) [@Suu\_nazmy](https://forum.freecodecamp.org/u/Suu_nazmy)\ **Post date:** [June 22, 2019, 9:20pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/5 "2019-06-22T21:20:06Z")
@snowmonkey thanks, I gonna check it ---
**Author:** ![Suu\_nazmy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suu_nazmy/32/118200_2.png) [@Suu\_nazmy](https://forum.freecodecamp.org/u/Suu_nazmy)\ **Post date:** [June 22, 2019, 9:52pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/6 "2019-06-22T21:52:57Z")
I followed the resource but when I put grid in element, the **package** section is damaged ---
**Author:** ![haraprasad45](https://avatars.discourse-cdn.com/v4/letter/h/8e8cbc/32.png) [@haraprasad45](https://forum.freecodecamp.org/u/haraprasad45)\ **Post date:** [June 23, 2019, 1:06am UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/7 "2019-06-23T01:06:41Z")
Try reducing the use of “px” and instead use “em”. The specific width of elements like “#footer” and “header” is causing issues in the responsive part of your website. please go to the link below to know more about CSS scaling units: [https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent](https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent) ---
**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\ **Post date:** [June 23, 2019, 12:11pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/8 "2019-06-23T12:11:03Z")
CSS Grid is powerful but it’s not magic. 1. Only direct children of the grid container will be grid items. For your header, this means the .bar element will be one grid item and the .container element will be the other grid item in your two column grid. You can’t see the top bar because it doesn’t have a width. In any case, I doubt that is the layout you are going for. 1. Other styles set on elements do not just go away. For example, the #guarantee-policy section has some absolutely positioned elements that will not conform to the grid. You need to learn CSS Grid to be able to use it. Check out the [Grid course by Wes Bos](https://cssgrid.io), read the [Grid docs on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and check out the [CSS Tricks article](https://css-tricks.com/snippets/css/complete-guide-grid/). ---
**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\ **Post date:** [June 23, 2019, 2:58pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/9 "2019-06-23T14:58:00Z")
I would strongly suggest planning and designing with [adaptive and responsive](https://www.google.com/search?q=adaptive+and+responsive+design) design in mind from the start. You will paint yourself into a corner if you just design using some fixed screen size. You have `min-width: 1100px` on the body, this completely breaks all adaptiveness. Your layout with the CSS you have now is almost equivalent to a Photoshop mockup. Don’t get me wrong, I like the design, but I think you will find it harder to make responsive because you seem to not have planned for it. That is one of the benefits of using a mobile first approach. You don’t suddenly find yourself with a complex layout you now have to figure out how to layout on small screens. Even if you don’t like doing mobile first, always think about how the layout should adapt to different screen sizes right from the start. Take your packages section, what is the plan? How should the layout be on smaller screens? Think about this as you are designing the layout, it may affect your choices. 1. I’d suggest dropping the use of floats and using flexbox and CSS grid. 2. Keep everything as adaptive as possible. 3. When you use position use relative units like percentages. So the child elements are absolutely positioned relative to the parent by a percentage. ---
**Author:** ![Suu\_nazmy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suu_nazmy/32/118200_2.png) [@Suu\_nazmy](https://forum.freecodecamp.org/u/Suu_nazmy)\ **Post date:** [June 23, 2019, 3:10pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/10 "2019-06-23T15:10:17Z")
@lasjorg THANKS SO MUCH! as an example what should i add at the body instead of `main-width: 1100px` ---
**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\ **Post date:** [June 23, 2019, 3:24pm UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/11 "2019-06-23T15:24:37Z")
Don’t use min-width at all unless there is a very good reason for it. If you do set a min-width it should be just that, the minimum width you want something to never go below. I would not use it on the body. Some do use a very low px value, like `min-width: 320px` on the body. But that doesn’t really do anything much for the layout other than making everything overflow at that screen size. If you meant to use a max-width, then that should preferably be set on a container element or class like you already have. You just need to change your width on the container to max-width instead of width. The body is best not used as a layout container, it should just have some base styles, like font-size, font-family, line-height, background and so on. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [March 9, 2021, 11:23am UTC](https://forum.freecodecamp.org/t/css-grid-responsive-problem/288376/12 "2021-03-09T11:23:23Z")