Css grid- responsive problem

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

It would be better to know more about the problem you are facing. So we can give you the precise solution you need. :slight_smile:

@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

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)

@snowmonkey

thanks, I gonna check it

I followed the resource but when I put grid in element, the package section is damaged

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

1 Like

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, read the Grid docs on MDN and check out the CSS Tricks article.

I would strongly suggest planning and designing with adaptive and responsive 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.

@lasjorg
THANKS SO MUCH!
as an example what should i add at the body instead of main-width: 1100px

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.

1 Like