Google Maps and text

[cschm.tz]

@mariusjopen
Hi all, I am using WP Google Maps as a plugin for my site.
Do you by any chance know if it allows you to have text over the map?

The idea was to have the map as a full size background and some descriptive text on top, instead of underneath as I have now.
https://lasalbercas.com/como-llegar-2-2

Any suggestions are great at this stage!!!
Thanks so much in advance,

Christian

[Richard]

Dear Christian @cschm-tz

I don't know if its possible with the Google maps plugin..

Try adding this code to the "Custom CSS" Area of 'Lay Options - Custom CSS & HTML" :

.text.lay-textformat-parent {
    transform: translate(0px , -500px);

}

Let me know how you go and have a wonderful day :)
Richard

[cschm.tz]

@Richard-K said in Google Maps and text:

.text.lay-textformat-parent {
transform: translate(0px , -500px);

}

Hey Richard!
Thanks so much for your tips :)

The text has now moved which is definitely progress, but now I am left with a blank space which is where the text used to live. Is there a way of getting rid of this without deleting the text altogether? (screenshot attached)

This is the updated link by the way!
https://lasalbercas.com/como-llegar-2-2-3

Thanks again for your help and have a great day!
Christian

[cschm.tz]

@Richard-K
Hey again Richard,
Is it possible this last change in css you suggested changes the text behaviour throughout the whole site?

.text.lay-textformat-parent {
transform: translate(0px , -740px);

Is there a way of only addressing the paragraph in the maps page which appears in the above screenshots?

Thanks so much for your time!!!
All the best

Christian

[Richard]

Dear Christian

You are completely right, i was not thinking properly sorry.

We can give an element within the Gridder its own class or ID so we can target it specifically:

Right-click element:

Then set either a custom 'Class' or 'ID' in my example i have used 'special' :

Then the code if you chose a 'class' ( also don't actually need to address 'text' anymore but just to be safe ) :

.special .text {
    transform: translate(0px , -500px);
}

Or the Code if you chose an ID :

#special .text {
    transform: translate(0px , -500px);
}

CSS transform: translate - has a lot of possible options and you can change the code to suit your needs:
https://www.w3schools.com/css/css3_2dtransforms.asp

Once again sorry about my past answer, and thanks for using Lay Theme Christian
If you have any more questions let me know :)

Best
Richard

[cschm.tz]

@Richard-K said in Google Maps and text:

.special .text {
transform: translate(0px , -500px);
}

Hi Richard

Thank you so much that will become very handy, although that sadly still doesn't solve the white gap I am left with — where the text original was placed. I have reattached for you to see :)

Getting rid of this space through css has meant deleting the text altogether — do you know a way around this?

Thanks again for all your helpful suggestions,
Best

Christian

[Richard]

Dear @cschm-tz

Are you able just to use the 'stack' feature?

Text should easily be placed on top ' stacked' on other elements - i was using code because i assumed this hadn't worked for you

Best
Richard