padding at bottom when adding google...

User 283347 Photo


Registered User
388 posts

Hello everybody!!

So I'm messing with adding Google maps and followed the video, but for some reason I cannot seem to make the big white space at the bottom of the maps go away. I have changed the % in the CSS and messed around a lot, but still cant make it match up.

Can anyone of you awesome experts identify what I have done wrong?

mynetshepherd.coffeecup.com

Thanks!

MJ
User 2088758 Photo


Senior Advisor
3,086 posts

Hi Mark,

Do you see the white gap in RLMP? or is it just showing when you upload it?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 283347 Photo


Registered User
388 posts

Hey Steve,

It does not show in rlmp... it seems to be something in the css or the little <div> snippet which I took from the knowledge base for rlmp about adding google maps.
User 2088758 Photo


Senior Advisor
3,086 posts

Ok from what i see this is the code you have to modify in your custom.css. You will want to play with the padding-bottom: 56.25%; Reduce it until the bottom padding matches the map size.

.cc-map-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 283347 Photo


Registered User
388 posts

Hey Steve,

Thanks for the reply. However, I have tried that. It only seems to draw the image up...making it smaller but leaving white space??? I even messed with changing it to px rather than %.

I changed it to 10.25% so you can see what I mean...it stays consistent on any value.

MJ
User 2088758 Photo


Senior Advisor
3,086 posts

Try this

margin-bottom: 0px;
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2484360 Photo


Registered User
3,293 posts

You need to change the height setting on the below code. I would recommend around 95%.

.cc-map-wrapper iframe

position: absolute;
top: 0;
left: 0;
width: 100%;
hight: 75%;
User 283347 Photo


Registered User
388 posts

should I add that at the bottom? or swap it out for the padding-bottom %? At any rate I tried both...it did not solve it. I also tried it under the cc-map-wrapper i frame...still didn't work???

There could be something wrong in my layout??? I'm still learning all this, so it could be anything...ha!

Thanks for your help, though. :)
User 283347 Photo


Registered User
388 posts

Hey Adam,

Thanks for the help. I was posting the reply to Steve and then saw yours. That seems to have don it. 95% leaves just a small amount of gap...I'll mess with it until I get it just so:)

Thanks to you and Steve for all the help.

MJ
User 2484360 Photo


Registered User
3,293 posts

mark johnson wrote:
Hey Adam,

Thanks for the help. I was posting the reply to Steve and then saw yours. That seems to have don it. 95% leaves just a small amount of gap...I'll mess with it until I get it just so:)

Thanks to you and Steve for all the help.

MJ


If you wanted no gap change it to 100%. However I would recommend a small gap at the bottom hence the 95%.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.