-
AuthorPosts
-
March 7, 2017 at 10:32 pm #757309
Hello Support. I would like to add some text over the top of a full width Google Map in Enfold. I’ve provided a link to the map page on my site and a link to a sample page. Is this something that can be done with quick CSS code? If not do you have recommendations? Thanks for your help. -Gary
March 7, 2017 at 11:26 pm #757339Hey alliancepp,
This is possible using a full-width color section. An example of how this works:
Add a color section then set the height to at least 75% of the browser height. Place a google map element plus a text block below. Apply a unique id to the color section in the Section ID field. Use “custom-section” for example. Add this in the Quick CSS field.
#custom-section section.av_textblock_section {
position: absolute;
top: 0;
left: -10%;
background: rgba(0,0,0,.5);
width: 60%;
height: 100%;
padding: 20%;
}#custom-section .container, #custom-section .template-page {
padding: 0;
}You can add all the text content inside the text block element.
Best regards,
Jordan Shannon- This reply was modified 7 years, 9 months ago by Jordan Shannon.
March 8, 2017 at 12:00 am #757364Thanks for the quick reply Jordan! We’re getting closer but it’s not quite working…here’s what i’m seeing (link below).
I have put both the text box and the Google Map Widget inside the Color Section. I did set the color section to 75% browser height and used your color-section in Section ID field. Also I’ve added in the Quick CCS code to Enfold>General StylingThe box is now overlaying the map, but the map is no longer stretching full width
Thanks for your help, Gary
- This reply was modified 7 years, 9 months ago by alliancepp.
March 8, 2017 at 12:13 am #757373Hi,
Can you attach your admin info to the private content section so that I can look into this further.Best regards,
Jordan ShannonMarch 8, 2017 at 12:22 am #757378Here’s the login info.
March 9, 2017 at 12:08 am #758111Hi,
If you view the page now, I was able to get this working. You can see the updated css in the quick css section. Let me know if this is an idea of what you needed, and we can adjust accordingly if needed.
Best regards,
Jordan ShannonMarch 9, 2017 at 1:20 am #758128Jordan this looks great! I was able to tweak – thank you.
One last thing…there’s an 80px space above and below the map. Can you get rid of that so it bumps up against the bottom of the main Nav area and the footer? I turned off the padding in the color section but it didn’t make any change.
I truly appreciate the help!! Kriesi support is awesome!
GaryMarch 9, 2017 at 8:01 am #758205Hi,
I am glad the solution worked out for you! I was able to reduce the space under the map a bit by adding the following to quick css.
#footer .widget{
margin-top:0px !important;
}Best regards,
Jordan ShannonMarch 9, 2017 at 9:00 pm #758547Jordan,
Thank you. That Quick CSS didn’t seem to work so I changed the Section Minimum Height to setting “No Minimum height, use section to define Section height” and that did it. It looks great! Thanks again for all your help on this issue and have a super day!March 9, 2017 at 9:10 pm #758555Hi,
No problem at all. If you need anymore help, don’t hesitate to contact us!
Best regards,
Jordan ShannonMarch 17, 2017 at 7:31 pm #762673Jordan, One final request on this issue…I’d like to change white box to a gradient. I’d like it to be solid white on left and blend to transparent on right edge. I just want it to fade into the map. Can you send me the quick css code for that? If needed the admin log-in info I put in the ticket earlier still works. Thanks for your help.
March 17, 2017 at 8:55 pm #762717Hi,
I have add this to the original css:
background: -moz-linear-gradient(left, rgba(255,255,255,1) 48%, rgba(255,255,255,0.9) 53%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 48%,rgba(255,255,255,0.9) 53%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,1) 48%,rgba(255,255,255,0.9) 53%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
Let me know if this gives the desired result.
Best regards,
Jordan ShannonMarch 17, 2017 at 9:39 pm #762748Jordan this is great! Thank you!!
March 17, 2017 at 9:42 pm #762750No problem at all! I am glad I was able to help and that you like the result, if you need additional help please do not hesitate to contact us.
Best regards,
Jordan ShannonMarch 21, 2017 at 11:41 pm #764428Jordan, Good afternoon. The map overlay you helped me with works great on the desktop, thank you! I’m having trouble with it responding correctly when viewed vertically on my iphone. I’ve a link below to the map page and a couple of links to the screen captures from my phone.
The log-in credentials I provided at the beginning of this string still work. Thanks for your help!
March 21, 2017 at 11:56 pm #764439Hi,
Okay I will take a look.I will let you know when to test.
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.