Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 10, 2015 at 1:23 pm #442096
    webon_israel

    hi
    i am trying to get the same effect as in this website (bottom section of the website):
    http://www.templatemonster.com/demo/53043.html

    as you can see there is a full width google map with a color overlay on half width with text and icons on it
    please help on how to achieve this
    thanks

    May 12, 2015 at 6:39 am #442806
    Ismael

    Hey webon_israel!

    Thank you for using Enfold.

    Use the grid row element. Set the cells to 1/2 1/2.

    EDIT: I’m sorry but it turns out this is not possible without at least using a custom script or decent css modification.

    OK. 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.

    Regards,
    Ismael

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