Survey Project Help

HTML-CSS
1

Hello,

Can someone tell me why the text field is stretching across the screen and how do I get it smaller ( I want it to look like the example survey). Also should I use a different approach like using columns and rows instead of a unordered list? Here is my code thanks.

2

We you need to set widths on your li element. So in you CSS:

li {
width: 
}

put the size next to width.
Also make sure to close the input.

1 Like
3

Ok, so first of all you must pay attention to close all tags (h1, input, etc). That being said, your importing Foundation 6 framework in your project but you never make use of it in your code, that’s why the input element is taking up so much horizontal space; Foundation sets its width to 100% by default.

If you want to use Foundation 6, you should properly learn HTML and CSS before, but I’ll give you a code that I think it will match what you’re expecting your code to do:

<form>
  <div class="grid-x grid-padding-x">
    <div class="small-2"></div>
    <div class="small-4 cell">
      <label for="name-entry" class="text-right">* Name</label>
    </div>
    <div class="small-4 cell">
      <input type="text" id="name-entry" placeholder="Enter name here">
    </div>
    <div class="small-2"></div>
    <div class="small-2"></div>
    <div class="small-4 cell">
      <label for="name-entry" class="text-right">* Name</label>
    </div>
        <div class="small-4 cell">
      <input type="text" id="name-entry" placeholder="Enter name here">
    </div>
    <div class="small-2"></div>
  </div>
</form>

This code creates 2 rows with 4 columns each (2 empty, 1 for label, 1 for input).

Although Foundation is great, I would strongly recommend you to start from the ground up: remove the imported framework from your project’s settings and start from scratch using vanilla CSS. This way you will learn much more and soon you’ll be able to tame other frameworks like Foundation or Bootstrap.

Hope it helps.

1 Like