How to prevent text from moving out of the form container when the window is shrunk? Also I’m not able to make the contents of the form in the center of the page

here is my code link:


Any help is appreciated.

that’s because of your property rule-set

#dropdown,#rd{
  position:relative;
  left:341px;
  bottom:35px;
  height:30px;
  width:150px;
  padding:1px;
  margin:2px;
}

Solution: Create an another rule-set for id #rd and try different bottom property,
like this :

#rd{
bottom:5px;

Check this one: Fork Me! FCC: Test Suite Template

thanks but i want the radio buttons to be in the same height to its respective question.Some thing like that:


Moreover i want to prevent my text from moving out of its container when window is resized and i want the whole thing in the center as in the above link.

#dropdown,#rd{
  position:relative;
  left:341px;
  bottom:35px;
  height:30px;
  width:150px;
  padding:1px;
  margin:2px;
}

The problem with the approach you use here is that it will overflow the container when the screen size gets smaller.

What you can do is look for logical groups, like a label and an input, wrap these in a div and style these elements instead of all elements vs the main container / wrapper. This way the styling is more modular and granular.

Changes you make like this have less impact on pushing around content in unexpected ways. And because a div is a block-level-element it will expand to take up all available width, removing the need to use left / right etc positioning and use margins instead or flex properties instead.

1 Like

Ok thanks a lot. You really save my day :slight_smile: