Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 7, 2017 at 10:32 pm #757309
    alliancepp

    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 #757339
    Jordan Shannon

    Hey 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

    March 8, 2017 at 12:00 am #757364
    alliancepp

    Thanks 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 Styling

    The 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, 8 months ago by alliancepp.
    March 8, 2017 at 12:13 am #757373
    Jordan Shannon

    Hi,
    Can you attach your admin info to the private content section so that I can look into this further.

    Best regards,
    Jordan Shannon

    March 8, 2017 at 12:22 am #757378
    alliancepp

    Here’s the login info.

    March 9, 2017 at 12:08 am #758111
    Jordan Shannon

    Hi,

    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 Shannon

    March 9, 2017 at 1:20 am #758128
    alliancepp

    Jordan 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!
    Gary

    March 9, 2017 at 8:01 am #758205
    Jordan Shannon

    Hi,

    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 Shannon

    March 9, 2017 at 9:00 pm #758547
    alliancepp

    Jordan,
    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 #758555
    Jordan Shannon

    Hi,

    No problem at all. If you need anymore help, don’t hesitate to contact us!

    Best regards,
    Jordan Shannon

    March 17, 2017 at 7:31 pm #762673
    alliancepp

    Jordan, 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 #762717
    Jordan Shannon

    Hi,

    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 Shannon

    March 17, 2017 at 9:39 pm #762748
    alliancepp

    Jordan this is great! Thank you!!

    March 17, 2017 at 9:42 pm #762750
    Jordan Shannon

    No 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 Shannon

    March 21, 2017 at 11:41 pm #764428
    alliancepp

    Jordan, 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 #764439
    Jordan Shannon

    Hi,

    Okay I will take a look.I will let you know when to test.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.