nikobak
KPCKevin Powell - Community
•Created by nikobak on 6/12/2024 in #front-end
This works on Desktop, but Mobile it's deform... please help
What do you suggest I do for the Checkbox that is floating above?
15 replies
KPCKevin Powell - Community
•Created by nikobak on 6/12/2024 in #front-end
This works on Desktop, but Mobile it's deform... please help
Thank you @clevermissfox
15 replies
KPCKevin Powell - Community
•Created by nikobak on 6/12/2024 in #front-end
This works on Desktop, but Mobile it's deform... please help
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?
15 replies
KPCKevin Powell - Community
•Created by nikobak on 6/12/2024 in #front-end
This works on Desktop, but Mobile it's deform... please help
You are more clever than me, Miss Fox
15 replies
KPCKevin Powell - Community
•Created by nikobak on 6/12/2024 in #front-end
This works on Desktop, but Mobile it's deform... please help
I updated the codepen
15 replies
KPCKevin Powell - Community
•Created by nikobak on 6/12/2024 in #front-end
This works on Desktop, but Mobile it's deform... please help
It 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.
15 replies