I tried to duplicate the Survey Form example as much as possible. It looks good on a desktop, but when I shrink the screen everything overflows and looks terrible. How do I make this website responsive? Here is my code: https://codepen.io/rrichetto/pen/RBoLEO
One of the best ways to create responsive layouts is to use a framework such as bootstrap, bulma or turret.css. Now, if you don’t feel that your knowledge is up to that yet that’s fine, just know that these frameworks can take a lot of the heavy lifting away for the designer and make things easier.
I played a little bit with your css to do a bit of testing (on my smartphone). Look at the width of your main
section and try making that a bit wider (say 75%?)
You need to add in css something like:
@media (max-width: 576px){
main {
width: 85vw;
}
#container {
grid-template-columns: 1fr;
}
.label-side {
justify-self: start;
text-align: left;
}
.input-side {
justify-self: start;
padding-left: 4em;
}
}
1 Like
Works great, thanks!