google maps is not responsiv

Support Area Forums Elite google maps is not responsiv

This topic contains 9 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question: http://engel-classic.com
  • Author
    Posts
  • #35311

    Andreas Roth
    Participant

    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

    #35324

    Bill Robbins
    Moderator

    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

    #35346

    Andreas Roth
    Participant

    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

    #35348

    Bill Robbins
    Moderator

    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.

    #35349

    Andreas Roth
    Participant

    Hi Bill,
    that would be great.

    #35354

    Bill Robbins
    Moderator

    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

    #35384

    Andreas Roth
    Participant

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

    #35388

    Bill Robbins
    Moderator

    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

    #35390

    Andreas Roth
    Participant

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

    Best regards
    Andreas

    #35392

    Bill Robbins
    Moderator

    Glad that did the trick Andreas 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘google maps is not responsiv’ is closed to new replies.