Responsive Survey Form. Problem with Media Queries

1

Tell us what’s happening:
I’m at a loss, when my viewport is below 500px my info moves all the way to the right. I want to the #titlesec and #forms section to take up 100% of the viewport when it’s below that 500px mark(to make it easier for users on mobile devices to access the form. You guys think you can help me out and let me know what the problem is?

2

that is because of the: position: relative and left: 345px in #title-sec.

Delete both and add margin:auto and you’ll notice the div centered without any problem.

oh and also, the same thing goes for the second div #forms

Happy Coding!

3

Hi Nylus323!
What you can do is, just wrap your 2 divs in a container div:

<div class="container">
    <div id="titlesec"> ...... </div>
    <div id="forms"> ...... </div>
</div>

and style it as follows:

.container{
  display:flex;
  flex-direction:column;
  align-items:center;  
}

Also, remember to delete position:relative from your inner divs. Your problem will probably be solved for all viewport sizes. Just try it out! Good luck.

4

This works perfectly. Thankis so much. Been struggling with this for a whole day.

1 Like