Regarding display:inline-block - How stack items

HTML-CSS
1

Currently working on the FCC: Survey Form challenge, but I have a question related specifically to spacing elements using inline-block.

If you check out the example page here: https://codepen.io/freeCodeCamp/pen/VPaoNP you can see that all of the various fields are nicely spaced one on top of the other like any normal survey page.

I’ve carefully read through the example code and I can’t understand which part of the CSS is causing the labels and input fields to nicely stack like that.

I’ve made a simpler version using what I thought would be the same style https://codepen.io/Datoufa/pen/PBmbZJ?editors=1100 and everything is just placed on the same line.

Could anyone let me know what I’m missing? Thanks!

2

did you provide the correct link? All I see is 3 lines of HTML and no CSS code

<h1 id="title"> Survey Form</h1>
<div style:>
<p id="description">Fill in the following information so we can personalize your newsletter!</p>
</div>
3

You provided an empty link.
And as you said everything is placed on the same line, then you might adjust it with width %.

4

Hi

Each question is in wrapped a div so they stack nicely on their own not really needing any additional styling

Within each row is a div for the label and div for a input. This gives two layers of containers to “push off of” with margin, padding, etc to align the elements enclosed.

Divs for input and label are restyled in media query so that label stacks over input on small screen.

5

Thanks for this. Let me check it out this evening. According to your response, I’ll need to add some padding and margin so that each div fits in correctly. Is there a simple way to see how wide a container is so I can just style the label and input divs accordingly without trial and error?

Also, apologies providing an empty link. I’m not sure why it didn’t save correctly.

I’ve resaved the pen I was working on so hopefully it shows here: https://codepen.io/Datoufa/pen/PBmbZJ?editors=1100

If not, here’s the corresponding css and html:
https://codepen.io/Datoufa/pen/PBmbZJ.css
https://codepen.io/Datoufa/pen/PBmbZJ.html

6

Apologies, I provided the link in a reply below. Not sure why it didn’t save.

7

I reposted my link below. My main issue was with the label and input divs not stacking correctly. It seems to be an issue with adding margin to those containers so that they fill out each row and stack.

8

Just wrap each <label> with corresponding <input> within a <div>, you can see them stacking since div is a block element, and then you can adjust with margin and padding.

9

They did something kind of like this