google maps is not responsiv

[Andreas Roth]

Hi Bill,
used a widget in footer for google maps <iframe> and it is not responsive.
Tried to fix it by using a div container and custom css but it dont works.

Used that code in text widget:

<div class=”responsiveContainer”>
<!– iframe-Code from Google Maps –>
</div>

css:

.responsiveContainer {
position: relative;
padding-bottom: 56%;
height: 0;
overflow: hidden;
}

.responsiveContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Best regards
Andreas

Attachments:

1. 

   12650166_1091234040896433_623303310_n.jpg
   

2. 

   12665612_1091234030896434_152687660_n.jpg
   

[Bill Robbins]

Hi Andreas,

Good question. Google Maps are not natively responsive, but will remain a fixed width. Here’s one way you can change for for a map that’s added to a text widget:

1. Go to the Appearance section in your WordPress dashboard and click on Theme Options.
2. Choose the Styling tab and scroll down to the bottom and you’ll see a Custom CSS box.
3. Add this there:

   
   .textwidget iframe {
   	max-width: 100%;
   }
   

4. Save your changes.

See if that won’t keep the map from spilling beyond the text widget. Let me know if you run into any questions.

Take care,
Bill

[Andreas Roth]

Hi Bill,
it is a bit better but still not working
and the map is even smaller in full mode.

I also tried to put the <iframe> into the field of the
contact-widget but then it appears allways under the text.

Best regards
Andreas

Attachments:

1. 

   12596302_1092059730813864_643603444_n.jpg
   

[Bill Robbins]

If you’ll leave it in the contact widget, I can show you how to make that widget full width. That would be the best option.

[Andreas Roth]

Hi Bill,
that would be great.

[Bill Robbins]

Fantastic. Just add the map to the contact widget and take out the text widget with the map and let me know. I’ll send over the changes.

Thanks,
Bill

[Andreas Roth]

Hi Bill,
now i have add it to the contakt widget and the text widget is out.

[Bill Robbins]

Good Morning Andreas,

Try adding this to the Custom CSS in the Advanced tab of your theme options page:

#footer-sidebar .widget.organizedthemes-contact {
	width: 100%;
	overflow: hidden;
}

#footer-sidebar .widget.organizedthemes-contact h3 {
	word-wrap: break-word;
}

@media only screen and (min-width: 768px) {

	#footer-sidebar .organizedthemes-contact .vcard,
	.page-template-page-home-template-php #footer-sidebar .organizedthemes-contact .vcard {
		float: left;
		width: 45%;
		padding: 20px;
		min-height: 360px;
	}
	
	#footer-sidebar .organizedthemes-contact .contact-map,
	.page-template-page-home-template-php #footer-sidebar .organizedthemes-contact .contact-map {
		float: right;
		width: 55%;
		min-height: 360px;
		overflow: hidden;
	}
	
	#footer-sidebar .organizedthemes-contact .contact-map iframe,
	.page-template-page-home-template-php #footer-sidebar .organizedthemes-contact .contact-map iframe {
		height: 360px;
		width: 100%;
		max-width: 100% !important;
		margin-bottom: -4px;
	}

}

and see if that won’t do the trick for you. Let me know if you run into any trouble.

Have a great week,
Bill

[Andreas Roth]

Hi Bill,
now it is working, thanks a lot!

Best regards
Andreas

[Bill Robbins]

Glad that did the trick Andreas 🙂

[Author]

Posts