Survey form : struggling with the beta FCC project

Code Feedback
1

Hi everyone!

I’m currently tackling project number 2 in the Responsive Web Design section of the beta version of FCC : creating a survey form functionally similar to [this on].(https://codepen.io/freeCodeCamp/full/VPaoNP)

Because I’m not super excited about surveys, I didn’t try to get creative straight away and thought it would be an interesting idea to just try and clone the example site.

My code so far is stored HERE.

I decided on doing a 2 column CSS grid for larger screens, and shifting the labels to the right:



@media only screen and (min-width: 600px) {

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
}

label {
    text-align: right;
}

}


It looked fine on my desktop:





But of course, when I looked at it on smaller screens, it was messed up :





So I decided to give a class to all the different elements (the labels and inputs) I wanted to have aligned on one single column :



.small-screen-element {

    display: block;
    margin: 25px auto;
    text-align: center;
}


And it got better:





The radio and checkbox list were a little messed up (didn’t want those individual elements to be aligned center) so I grouped them in divs and styled them inline:



style="text-align:start;"



Which feels wrong to do, but worked ok:





But now of course, when I go back to a large screen view, it doesn’t work anymore:





The label elements on the left for example are aligned to the center, when I want them aligned to the right. Ideally I would be able to toggle the “small-screen-element” class off when I switch to a larger view, but I understand things don’t work like that in CSS. I have to overwrite the class.

But now I’m a bit confused and wonder how I should approach this whole situation efficiently.

Thank you for your comments!

2

To make things scale properly, you would need to add @media breakpoints to change your css code to fit the proper screen size. Example .button{ width:200px}
that will set the button width to 200px but if you add @media (max-width: 300px) { .button {width:100px} } it will make the button 100px when the screen size is 300px or less. Responsive design is a real pain so id suggest using Bootstrap or Skeleton to help you with the project.