Mobile View of Footer Widgets

My site is: http://cavaliercomputer.com/

The footer has 2 widgets of which the Google map and the Contact Form 7 overlap when displayed on mobile. Not only that, but the contact form renders awkwardly too.

Hello there,

It happens due to the widget area can’t recognize the map height which is defined by the Goggle map library after it’s completely loaded. It’s resulting the next widget takes the top edge of the map container. To fix this, you’ll need to define fixed height by adding this CSS code into Appearance > Customize > Additional CSS in your side dashboard.


@media only screen and (max-width:991px) {
  
  .footer-widgets .col-md-4:nth-of-type(2) {
     min-height: 400px;
     margin-bottom: 50px;
  }  
  
}

Regards,
Kharis

Thank you Kharis. It worked in terms of the maps overlap; however, the Contact Form 7 fields still extend beyond their container on mobile. Thoughts on how to fix?

Add this CSS code, please.


.wpcf7-form .wpcf7-form-control {
  max-width: 100%;
}

Regards,
Kharis

Worked perfectly! Thank you!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis