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
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
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
sorinr
August 11, 2018, 5:17pm
10
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
}
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?
@Sujith3021 Thanks for response.
I checked it but could not figure it out the difference.