21 Replies
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 furtherI'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
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 defaultYou'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?
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:
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!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)
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)Brilliant, thank you for explaining that I really appreciate it. I'm sure Pary will too!
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 itJust 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.
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
can't i just make them all inside a form
Yea but right now they aren't inside a form it doesn't look like
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?
You have to put the form elements inside the form and make sure nesting is maintained properly
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
@vince
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
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
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