This works on Desktop, but Mobile it's deform... please help
https://codepen.io/Auto-Ma/pen/KKLXGzQ
The layout is fine until a certain small size screen where some require scroll to the right while other are narrow like a straw.
It should have been simple enough, but I'm not great at this.
The h1, p, span, and textarea are all out of wack.
10 Replies
The inputs and text area are given a width by default. Add
inline-size: 100% to those form elementsIt didn't change.
I tried the following and it is better:
/* Add mobile-friendly styles */
@media only screen and (max-width: 768px) {
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
form {
margin: 20px;
}
.form-element {
margin-bottom: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
font-size: 16px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
font-size: 18px;
}
#success-message {
font-size: 16px;
padding: 10px;
}
}
followed by the previous style
Now I have my checkbox misalign when in smaller screen.
And would like to align the right margin of the <p> to not go beyond the textarea right margin.
I updated the codepen
It worked for me with one more line and no media query 🤷🏻‍♀️
You are more clever than me, Miss Fox
Hi @nikobak.
The solution here is that you need to use
box-sizing: border-box; in the input and textarea elements. Basically, when you are using padding in this type of elements, the element itself is taking that padding as outside its own box (like a border). Then you need to indicate the box sizing is applied with the border box included.
The simple way to do this is to use a reset css. There are many of them in the internet or you can try to do yours!Thank you @stillmorris for your advice. I tried on codepen and on my computer, no change to textarea.
I did do max-width=740px; and it does the trip.
Can you help me with the checkbox that gets disaligned with its label when in tablet mobile screen?
Hey! I forgot to tell you that you should also remove all <br> tags!. You don't need them and maybe that's the trick.
Yes, of course! You need to override the width styling of you input selector with:
Instead of using br tags I recommend the use of css margins. This tags could be so tricky and annoying sometimes.
You did give the input and text area a width of 100% , just in your media query. Also you want your media query to come last in your stylesheet so other properties aren’t overwriting.
https://codepen.io/Miss-Fox/pen/JjqOGXM
Also font properties are inherited down so you don’t need to define it in every selector. Like on your form , you can declare 1rem (rem not px) and it will trickle down to all elements that haven’t been specified to be otherwise. Then you can pick out your h1 and button and set them if you need to. A better way is to use css clamp so it works at all screen sizes and you aren’t having to set a media query for font sizing.
And no not more clever 🤣 just have more practice
Thank you @clevermissfox
What do you suggest I do for the Checkbox that is floating above?
Ah missed that guy. In that case I adjusted my selector