Help with optimising custom liquid section in cart for mobile.

[tendtome]

I've added a custom liquid section to the cart page on our website.

I need help with:

1. Optimising it for mobile. The margin need changing and maybe the size of the input box?

2. We would like to make this a required field. I've added what i thought was the correct info but its not working. What have a done wrong?

3. How can I make the input data appear in the 'Additional Details' section of the order page?

Thank you 

<p class="cart-attribute__field">
<label for="how-did-you-hear-about-us" >Love to know how you heard about us? </label>
<input required="required" 
  id="how-did-you-hear-about-us" 
  type="text" 
  name="attributes[How did you hear about us]"
<input placeholder="Instagram, Facebook, TikTok, Google, Friend or Family, Local Health Store or Cafe"
  value="">
</p>

label {
  color: #f2f2e8;
  font-family: americana, serif;
  font-size: 16px;
  font-weight: bold;
}
input {
  border: none;
  background-color: #f2f2e8;
  padding: 5px 10px;
  margin: 2px 20px;
  width: 60%;
}
.cart-attribute__field {
  margin-left: 81px;
  padding-left: 50px;
  margin-right: 81px;
  padding-right: 50px;
}

[Shadab_dev]

So what i notice is you have two inputs which you don't actually need. For the first input where you have all the properties you can set the placeholder values as well. And also close the input tags correctly with />.

In the name property inside the input replace attributes with properties. Also add a form property inside input like form="{{ product_form_id }}".

And to make it required, you have to add a novalide attribute on the main product form on the product page, this will give the user an error message for leaving it empty.