0

I have my page created, and at the bottom of the page I have a contact form. However, When I resize the form on inspection, and go to a mobile device, the contact form spills into my footer.

What I currently have - click here

.

Could someone show me how this can be fixed? I changed the Z-index of the div I have to keep it within, but it did not make a difference, and nothing else I have tried worked either.

My aim is to keep my contact form proportional cross platform: Image 1 is what desktop looks like, image 2 is what the issue is:

image1image2

carl saptarshi
  • 345
  • 1
  • 5
  • 17

1 Answers1

1

You have to add the max-width to .contact-form>.form-group so the element's wouldn't overflow

.contact-form>.form-group{
  max-width:80%;
}
Marko Mackic
  • 2,293
  • 1
  • 10
  • 19
  • I tried that but it still doesn't work, it still overflows into the footer – carl saptarshi Jul 25 '16 at 22:34
  • Oh that :) just a second :) – Marko Mackic Jul 25 '16 at 22:35
  • 1
    well there are a couple of problems and you need to change the approach on this, you can't use absolute elements as overlays because that's gonna involve javascript because http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height – Marko Mackic Jul 25 '16 at 23:12