Need help with the CSS grid

HTML-CSS
#1

This is my Survey Form Project and I have a couple of questions.

  1. I don’t know why the media query applies its rules when the viewport is less than 650px.
  2. Why does the cells in the grid stick out as size of the width decreases? It appears quite clearly when the vw is less than 450px.

How do I fix this?

#2

Not sure if this is the best way as I’ve not done much with grid, and I just quickly did a Qwant search to find some info.

You could try overflow-wrap: anywhere; in your form styles, or not hard code specific widths. Could you use min-width and max-width? I’m not sure how overflow-wrap will affect your layout.

#3

@media screen and (max-width: 650px)
Because the width from 0px. up to 650px. the media query is applied. Max is short for maximum.

I think your content is running out of room. Under 650px. you should switch to a single column layout. Labels on top of inputs. Questions on top for buttons and checkboxes.

#4

How do I do that? Even when I set number of columns to 1, it’s taking 2 columns as usual.

#5

I don’t know enough about grid yet. Would it be about defining and placing grid areas? If you think of your grid as a collection of rows instead of two columns does it change the way you build it?

Before CSS grid, columns were an illusion. Everything was actually rows with neatly aligned parts.

So, in your use case, it would have been row1 left-hand side / row1 right-hand side.

  • For the two column look it would be display:inline-block;

  • For a single column it would be display:block;

In Flexbox each row is a flex container and the flex-direction is changed from row to column

#6

Hi,

For stacking label and input, try putting every question into a <div class="question"> (one question in one <div>), and in your CSS:

.question{
display:flex;
flex-wrap:wrap;
}

You can also stack all question div in <form> by giving form a display and flex-direction

form{
display:flex;
flex-direction:column;
}

From what I know, this will be a better approach than using grid.

#7

That helped. Thank you.

I wanted to see if I can do this using grids, responsive grids. For computer screens it’s not bad, but for mobile screens, even if I switch the grid to a column layout, the cells of the grid and its content keep sticking out. I don’t know why it’s behaving that way.

You got any ideas?

#8

In your media query for small screens .wide needs to change. .wide is creating to much white space left of the input. Use developer tools. It outlined the space around the input for me.

#9

Hi, sorry for the late reply.

I am not sure but I think the reason might be the content is not properly being contain inside the form(does this makes sense?).

I will try any or both of these two steps:

  1. give every container and content a width and height.
  2. assign gird-row and grid-column (or use grid-area that combines both) for layout.

If I am building your survey, I will give body and html a height:100% and width:100%, and use grid for the body layout like this

body{
display:grid;
grid-template-columns: 20% 80% 20%;
grid-template-rows: 20% 75% 5%
}

form{
grid-column:2/3;
grid-row:2/3;
/*or combine these two lines into gird-area:2/2/3/3;*/
}

This shall make the content stay inside the form, if not, I will give from a height and width.

Hope this help.