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