Survey Form - CSS Grid - Pls Help

HTML-CSS
1

Hello fellow campers,

I wanted to give CSS Grid a shot for this project, but I’m having trouble with a couple of things.

Here is the link the Codepen (here)

How do I align the .gender div class to the middle, like the rest of the items? I have made sure to place:

.gender {
  grid-column: 2 / 4;
  grid-row: 6;
}

But it isn’t behaving like the items on top.

I’ve even done it without lists but it just isn’t behaving like I’m expecting it to behave, like the items on top.

I’m sure there is something fundamental I am not understanding from CSS Grid here.

I tried fixing it with <fieldset> with no success, same thing.

Any help would be greatly appreciated.

Thank you!

–EDIT–

I don’t think I expressed my problem well, and I apologize for that. I want to try to place Gender: to the left, underneath and aligned with Employment Status , as well as moving the radio buttons along with their label text Male , etc to the right.

2

If you want to center an element (not text) within its containing element horizontally, you need to set margin-left: auto; margin-right:auto. As you can see below, I’ve accomplished it below using shorthand notation so the margin-top and margin-bottom are 0, but you can set that to whatever you want, including auto.

.gender {
  grid-column: 2 / 4;
  grid-row: 6;
  margin: 0 auto;
}
1 Like
3

Thanks! That does the job for getting it centered, which I was wondering how to do that. Now I’ve got to figure out how to place Gender: to the left, underneath and aligned with Employment Status, as well as moving the radio buttons along with their label text Male, etc to the right.

4

Okay, I’m not going to rob you of the triumph of effort. Plus, I have a project of my own to finish. I can tell you, however, that when I was in that section, learning HTML/CSS, I used “w3 <concept here>” as my Google search string all the time.

Edited for a disappearing angle bracket.

1 Like
5

Thanks for your help man, your margin suggestion solved part of my problem. I’ll keep banging my head tomorrow :stuck_out_tongue:

1 Like
6

Ogg say: “much banging make head hard, but also make it smooth, and aerodynamic!”

1 Like
7

@vipatron

This was really a “list” issue and solved it by:

ul {
  padding: 0;
}

Issue is solved and project submitted :slight_smile: