Responsive Web Design Projects - Build a Survey Form - Need help

I am stuck here.

My text-box is getting out of the form when i reduce the screen size (attached screen-shot)

Below is html code :

Survey Form

Let us know how we can improve freeCodeCamp

*Name:

Below is its css:
html,body{
background-color: aqua;
min-width: 260px;
text-align: center;
font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif
}
#formsection{
margin : 5px auto;
background-color: white ;
padding: 5px;
padding-top: 10px;
width: 75%;
max-width: 850px;
}
.label{
text-align: right;
size: 15px;
display: inline-block;
margin-top: 5px;
vertical-align: top;
padding: 5px;
width: 40%;
}
.input-field{
width: 280px;
margin: 5px;
padding: 5px;
border: 4px border-style #eeeeee;
border-radius: 5px solid;
}
.rightWidget{
display: inline-block;
text-align: left;
width: 48%;
vertical-align: middle;
}

Please help!

If your screen width is that small, maybe you could use a @media query.

@zapcannon99 Thanks for response , and it also works .But all i want is if the size is that small that the text-box should go to next line.

Maybe you can use flex-wrap

or you can try this approach (talks about navbars, but same principle):

@zapcannon99 Thanks a lot . Let me check that . Thanks!

1 Like

Unable to align name towards left.
Below is html and css code

Survey Form

Let us know how we can improve freeCodeCamp

*Name:

css
html,body{
text-align: center;
background-color: aquamarine;
}
#formDiv{
background-color: white;
width: 75%;
max-width: 100%;
display: inline-block;
border-radius: 5px;
border: 5px border-style white;
margin: 5px;
padding: 5px;
}
#left{
display: inline-block;
margin-right: 10px;
}
#right{
display: inline-block;
margin: 5px;
border-radius: 5px;
border: 5px border-style white;
padding: 3px;
}
#labelwidget{
text-align: left;
display: inline-block;
}
@media screen and (width : 330) {
#left{
width: 100%;
text-align: left;
}
}

With only seeing the css code and comparing with the screenshot, i think you have called the body entirely to be align:center, try to remove it and see if that works

@Sujith3021 Thanks for response.
However i want the elements to be in center when screen size is large,that is my requirement.

Alright.! Can you provide a codepen of your code that might be easy to clear it

Take a look at this pen for some ideas on how to layout your form.

@Sujith3021
Hi ,

This is my pen link.

You can get the issue when you will decrease the size

Change .labelwidget from display:inline-block to block, Make sure you add it in the media query

If i do that , then when i go to original size. It will not be aligned with text box

No, that’s why i said to add that in media query
ex:

@media (max-width: 467px) 
{ 
   apply the style 
}

Thanks mate :slight_smile: it worked .

How can i align the text box and select in the same vertical line .
Code pen link

@Sujith3021 can you please guide me with this?

You can refer this pen,

@Sujith3021 Thanks for response.

I checked it but could not figure it out the difference.