how do i give my textarea the same width as my timeline

21 Replies
vince
vinceā€¢13mo ago
You need to completely rebuild your html. You only have the textarea inside a form when the whole form should be inside a form. Once you rewrite it I'll look further
Nutsock
Nutsockā€¢13mo ago
I'm new to this but if you dont want to do the whole rebuild of the html you could change your text area for that part to this <textarea cols ="73%" id="message contact-form" class="box-shadow fit-in" name="message" required placeholder="Hello Iā€™m looking for a designer to help me out with..."></textarea> its like a pixel off but you can play with the fractions if you wish
vince
vinceā€¢13mo ago
I really advice against this honestly, it's lazy practice Ideally the easiest way would be to wrap the whole form (after rebuilding) in a .max-width container, give that a max-width: 800px (where 800px is an arbitrary max-width) and a margin: auto to center it horizontally and vertically. Form is a block-level element so should fill the width of the max-width container by default
Nutsock
Nutsockā€¢13mo ago
You're definitely right in terms of laziness. I'd like to understand this too, so say the 800px ended up wider or narrower than the layout currently is, would this affect the width of all the other elements too? in order to maintain the current width of their form, would they need to find the exact width that it is now and put that where the 800 is?
vince
vinceā€¢13mo ago
So the min function works by taking the lowest calculated value of 2 values (https://developer.mozilla.org/en-US/docs/Web/CSS/min). So in this example, we set width: min(100%, 800px). This will evaluate to either a width: 100% or width: 800px depending on the calculated value of width: 100%. If width: 100% is bigger than 800px, the min() function will choose 800px and the property will evaluate to width: 800px. But, if we're on a smaller screen size, then 100% will be smaller than 800px and the width will evaluate to width: 100%. width: min(100%, 800px) on a .container class here is essentially doing this:
<div class="container"></div>
<div class="container"></div>
.container {
max-width: 800px;
width: 100%;
}
.container {
max-width: 800px;
width: 100%;
}
You could also have set the width: min(100%, 800px) on the form element too. But a lot of times I find, when you have something with a predefined width/max-width, you want to give it something like margin-inline: auto to center it horizontally within the container (and I like having a separate container class for that), but it's preference. Let me know if that answers your question!
Nutsock
Nutsockā€¢13mo ago
That's a fantastic explanation, thank you so much. If I were to put that in brief as my interpretation of it. container = 800px, centered to the width of viewport. form 100% so will display as 800px if screen is wider than 800px. if screen narrower than 800px, form fits 100% of viewport. One last question, would the form then scale down responsively? Say the screen was 320px wide, would the form be 320px wide? (minus margins or padding)
vince
vinceā€¢13mo ago
Yup! Sounds like you got it right šŸ™‚ šŸ‘ and the form is a block-level element, so it'll have a width: 100% by default; you don't need to set it (unless you put a display: flex or something equivalent on the container, which you probably don't need anyway)
Nutsock
Nutsockā€¢13mo ago
Brilliant, thank you for explaining that I really appreciate it. I'm sure Pary will too!
vince
vinceā€¢13mo ago
Thinking about it a bit, you don't even need a width: min(100%, 800px) on this either; you can just set a max-width: 800px on the container class and it'll work But it's still good that I explained a bit on how that works because I use it a lot, so maybe you'll get some use out of it
Nutsock
Nutsockā€¢13mo ago
Just so you know how much this has helped me, I've been stuck on a very similar issue to pary on a different project for about an hour and didn't realise it was basically the same, and you just helped me make sense of what i've been struggling with. So 2 birds with one stone. Great work.
vince
vinceā€¢13mo ago
That's great! Glad I can help. This server has helped me a ton so I like trying to help others as I was where you were like last year haha. I also changed my explanation slightly
pary
paryā€¢13mo ago
can't i just make them all inside a form
vince
vinceā€¢13mo ago
Yea but right now they aren't inside a form it doesn't look like
pary
paryā€¢13mo ago
sorry i didn't reply quickly how much of the html do i have to put inside the form, i tried putting the whole thing inside a form except for the footer, but i encountered a bug im trying my best to fix it, but do i have to put also the footer inside a form?
Jochem
Jochemā€¢13mo ago
You have to put the form elements inside the form and make sure nesting is maintained properly
pary
paryā€¢13mo ago
I did but I encountered a bug that I was unable to fix so I just put it and the timeline in the same form
pary
paryā€¢13mo ago
@vince
vince
vinceā€¢13mo ago
Your HTML is a complete mess still tbh, please read the mdn docs and learn how to write a semantic form You're using multiple forms, multiple h1s, and br Put everything in 1 form, there's plenty of examples on mdn. Only use 1 h1 on a single page. Don't use br unless you have a really good reason to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form But it's really just about putting everything in a max-width container or giving your form a max-width
pary
paryā€¢12mo ago
Hey. Sorry for not replying quickly again, I don't be on this app that often. What about the texts in the form the h1s hey man i just finished rebuilding the whole thing and i encountered another problem, was hoping you could check it out for me. codepen: https://codepen.io/staticoly/pen/bGzgBoX @Jochem
Jochem
Jochemā€¢12mo ago
if you have a new issue that isn't directly related to this one, make a new post also, don't @ people to draw them into your post, people will see this when they see this and help when they can also also, if you have a new issue, at the very least describe the issue you're having @pary
Want results from more Discord servers?
Add your server