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

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

#1

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!


#2

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


#3

@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.


#4

Maybe you can use flex-wrap

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


#5

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


#6

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;
}
}


#7

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


#8

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


#9

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


#10

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


#11

@Sujith3021
Hi ,

This is my pen link.


#12

You can get the issue when you will decrease the size


#13

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


#14

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


#15

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

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

#16

Thanks mate :slight_smile: it worked .


#17

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


#18

@Sujith3021 can you please guide me with this?


#19

You can refer this pen,


#20

@Sujith3021 Thanks for response.

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