Hi,

Sorry for the delay, to create the google map API visit the google API page (link provided in the documentation )
https://developers.google.com/maps/documentation/javascript/get-api-key#key

1. Click on Get A Key.
2. A popup appears in that select “Create a new project” from the dropdown that appears when you click on “Select or create project” give it a unique name.
2. Click on Enable API.

Or in your google account click on re-generate API key on the top.

Both the options should work just fine.

Best regards,
Vinay

Hi,

Please review your site now.  It took us a lot of time but we are happy to help you :)

We add the below css in Quick css

/* Responsive Header */

.main_menu {
transform:translateX(-280px);
}
#header .avia-button-left {
position: absolute;
top: 54px;
right: 150px;
}
#text-14.widget{
width:100%;
max-width:1310px;
}

.seal {
position:relative;
float:right;
right:0px;
top:-10px;
}
.phone-number {
position:absolute;
z-index:999999!important;
top:68px;
right:610px;
}
@media only screen and (max-width: 1180px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
.seal {
right:90px;
}
#header .avia-button-left {
right: 240px;
}
.phone-number {
right:380px;
}}

@media only screen and (max-width: 930px) {
.responsive .logo img {
height: 80px!important;
margin-top:30px;
}
}

@media only screen and (max-width: 768px) {
#header .avia-button-left {
right: auto!important;
left:200px;
}
.phone-number {
left:0px;
right:auto;
}
.seal {
right:auto!important;
left: 190px;
float: left;
}
}

@media only screen and (max-width: 480px) {
.responsive .logo img,
#header .avia-button-left ,
.seal {
position:relative!important;
right:auto!important;
left:50%;
transform:translateX(-50%);
}
.phone-number {
position:absolute!important;
top: 160px;
right:auto;
left: 50%;
transform: translateX(-50%);
}
#header .avia-button-left { top:0}
}

And the below css was conflicting with the responsive nature so we removed the below from styles.css

@media only screen and (max-width: 749px) {

#header .widget {
transform: none!important;
}
}
#header .widget {
padding-top: 0;
position: absolute;
left:80%;
top: 23px;
z-index: 999;
}
@media only screen and (max-width: 749px) {
#header .widget {
position: relative;
padding-bottom: 0;
top: 0px;
left: 80%;
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header .widget {
position: relative;
padding-bottom: 0;
top: 0px;
left: 80%;
}
}

/* == HIDE MENU ITEMS ON DESKTOP/MOBILE == */

@media only screen and (max-width: 1099px) {
.hide-on-mobile { display: none !important; }
}
@media only screen and (min-width: 1099px) {
.hide-on-desktop { display: none !important;
}}

/*0000000000*/

/* == CHANGE FONT & COLOR IN MAGAZINE ELEMENT must stay in quick css == */
.av-magazine .av-magazine-content-wrap .av-magazine-title {
font-size: 22px;
color: #305a91;
}
.av-magazine-title:hover {
color: #80a7d8 !important;
}

/* == MAKE GREEN BOXES WHOLE IN MOBILE must stay in quick css == */
@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
margin-bottom: 0px;
}
}

/* Fix footer for mobile */
@media only screen and (max-width: 670px) {
.footer_color {
background-size: cover;
}
#footer #text-11 {
top: -50px;
}}
@media only screen and (max-width: 670px) {
#footer #text-10 {
top: 30px;
}}

/* == Fix spacing in icon list for small icons == */
.av-iconlist-small li {
margin-bottom: 5px;
}

/* mobile menu extend to larger screens */

/*
@media only screen and (max-width: 1099px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}

@media only screen and (max-width: 749px) {
#header .avia-button-left {
transform: none!important;
}
}
@media only screen and (max-width: 749px) {
#header .#text-12 {
transform: none!important;
}
} */

@media only screen and (max-width: 749px) {
#header_meta {
margin-top: -30px;
}
.logo img {
margin: auto!important;
}
.logo {
width: 100%!important;
}
#widget_sp_image-2 img{
transform:translate(50%, 20px);
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header_meta {
margin-top: -30px;
}
.logo img {
margin: auto!important;
}
.logo {
width: 100%!important;
}
#widget_sp_image-2 img {
transform:translate(50%, 20px);
}
}

/* Mobile Menu Up Minimum Screen Size */
@media only screen and (max-width: 1199px) {
nav.main_menu {
display:none !important;
}
#advanced_menu_toggle, #advanced_menu_hide {
display:block !important;
}
}

/* Mobile Menu Positioning */
#advanced_menu_toggle {
right: -25px;
top: 30px;
}

/* Move Client Login button in header */
#header .avia-button-left {
position: relative;
top: -38px;
left: 80%;
}
@media only screen and (max-width: 749px) {
#header .avia-button-left {
position: relative;
padding-bottom: 0;
top: -40px;
left: 33%;
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header .avia-button-left {
position: relative;
padding-bottom: 0;
padding-top: 0;
top: -120px;
left: 76%;
}
}

/* move phone number widget */
#header #text-12 {
position: relative;
top: 112px;
left: 18%;
}
@media only screen and (max-width: 749px) {
#header #text-12 {
position: relative;
padding-bottom: 0;
top: -20px;
left: 23%;
}
}
@media only screen and (min-width: 750px) and (max-width: 1099px) {
#header #text-12 {
position: relative;
padding-bottom: 0;
padding-top: 0;
top: -100px;
left: 66%;
}
}

Best regards,
Vinay

Hi,

still no idea what you want to achieve to be honest. This is what I see when I login to the site you’ve provided: http://i.imgur.com/0qwiSGj.png

I think it would be best to search a plugin with the functions you need. Here is a recommended plugin list for Enfold: kriesi.at/support/topic/recommended-plugins/

Best regards,
Andy

@alby8384
Please open a new ticket, so we can close this thread here. Otherwise it gets very confusing in our forum. Thanks for your understanding.

You can use a Vide Element to display your video on mobile, which you hide on desktop. Follow these instructions here at first: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
and then use something like:

@media only screen and (min-width: 736px) {
.video-only-mobile {
display: none;
}
}

Hope this helps.

Best regards,
Andy