Hi,
Thank you for the link, It looks like you are not showing the footer on your homepage, you are only showing the socket, which is the part below your footer. This is why the footer color is not showing. It also seems that you are using the elementor plugin with Enfold, we are not sure how well this will work, you may find conflicts with Enfold’s built-in Advanced Layout Builder.
To remove the theme credit I added [nolink] into your socket copyright field. Please check.

Best regards,
Mike

Hi,
Glad to hear this helps,
To target only IOS devices is a little tricky but it can be done, here are some articles:
http://stephen.io/mediaqueries/

The problem is that there is not just one way to do this for all IOS devices, you will need to use one solution for mobile devices and another for desktop Mac’s

To understand the special symbols in css, please read this article:

I was able to create a template of your frontpage:

this is what you ment by “clone” correct?
Perhaps there is one page that is giving you an error, please tell us which page this is so we can take a look.

Best regards,
Mike

Hi,
Thank you for the login. I looked at your test slider page but the background color doesn’t show until the page is scrolled, and then the whole page flashes. But this also occur without the css. You are right about the steep learning curve, I didn’t know about this transition.
Perhaps try this css in the Quick CSS field for the background color to show before scrolling:

#top.page-id-11675 .ls-slide-backgrounds {
  width:100%;
  height:100%;
  color:black;
  font-weight:bold;
  animation: myanimation 10s infinite;
}

@keyframes myanimation {
  0% {background-color: red;}
  25%{background-color:yellow;}
  50%{background-color:green;}
  75%{background-color:brown;}
  100% {background-color: red;}
}

Best regards,
Mike

Hi,
Thanks for the login, I took a look at your site but it looks like you or Rikard were able to upload the theme and activate it.
Please check and let us know if we can assist further.

Best regards,
Mike

Hey Dzimnikov,
1: Sorry IOS blocks auto play on mobile devices, Apple has made many press releases about this, your best option is to adjust the text that overlays the play button so your visitors can press play on the video.
2: The black bar is due to padding from the text above pushing down, to correct please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
#infotophelmet > div > div.container > main {
	padding-bottom: 25px !important; 
}
}

3: Your css was very close, please try this css instead:

@media only screen and (max-width: 766px) { 
  #contactarea .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #contactarea .flex_column.first {
      order: 2 !important; 
      display: flex !important;
  }
  #contactarea .flex_column.vermap {
      order: 1 !important;
      display: flex !important;
  }
}

Then clear your browser cache and check.
4: To remove “Enfold WordPress Theme by Kriesi” from the footer, please add the [nolink] shortcode in the copyright field
5: Your links to the “Privacy Policy” and “Terms of Use” are both “http” please change to “https”

Best regards,
Mike

Hi,
Glad to hear this worked for you. I tested your maintenance plugin by logging out and going to a few known page url’s and the plugin hid them from me, so your plugin is working well and I can’t think of a better one. Enfold does offer this functionality in the theme settings, but since you have the plugin in place you should go ahead and use it.

The images of guitars are actually products, to not have them not show on your “Shop” page, aka, your store, I found this function in the woocommerce documentation, and I added it to your child theme functions.php:

/**
 * Exclude products from a particular category on the shop page
 */
function custom_pre_get_posts_query( $q ) {

    $tax_query = (array) $q->get( 'tax_query' );

    $tax_query[] = array(
           'taxonomy' => 'product_cat',
           'field' => 'slug',
           'terms' => array( 'acoustic-guitars' ), // Don't display products in the clothing category on the shop page.
           'operator' => 'NOT IN'
    );


    $q->set( 'tax_query', $tax_query );

}
add_action( 'woocommerce_product_query', 'custom_pre_get_posts_query' );  

Best regards,
Mike

Hi,
Thank you for the feedback, to correct the white space, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 1238px) { 
#top.home #layer_slider_1 {
	min-height: 0 !important; 
}
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,
To add a screenshot please try using https://postimages.org/ and pasting the image URL in your post.
I tried to take a look at your link to the Google search, but I’m not sure what is wrong. Google does spider image alt titles and most SEO suggests to use keywords in your alt titles to take advantage of this.
Perhaps I’m not understanding correctly?

Best regards,
Mike

Hi,
For your test page, one way to add an overlay color on hover to your grid row cells is to use a filter, the filters are a little limited but if you use a mixed filter generator you can create some nice effects.
So I see that your first two cells have the custom class “teaser”, so as an example try this css in your Quick CSS:

.teaser:hover {
	filter: invert(9%) sepia(100%) saturate(5581%) hue-rotate(246deg) brightness(101%) contrast(147%);
}

For your hotel page the white border is actually the white background showing in between the cells, to correct please try this css:

#top.page-id-952 #teaser {
	 background-color: #324a7a !important; 
}

On this page applying a hover color would be like this:

#top.page-id-952 #teaser .flex_cell:hover {
	background-color: #327a38 !important; 
	
}

I hope this helps.

Best regards,
Mike

Hi,
Sorry for the late reply and thank you for the login, I followed @Guenni007 suggestion and added this css into your Enfold Theme Options > General Styling > Quick CSS field and now your font size on your home page is 19px
Please clear your browser cache and check.

#top .all_colors p,#top .all_colors .toggle_content li {
    font-size: 19px !important; 
}

Best regards,
Mike

Hi,
Sorry about that it looks like in the top rule I should have had the class “.av-masonry-entry” instead of “.av-masonry” like this:

#top .av-masonry-entry:hover figcaption h3.av-masonry-entry-title {
    font-family: Gilroy-Bold !important; 
font-size: 16pt !important; 
}
#top .av-masonry figcaption h3.av-masonry-entry-title {
    font-family: Gilroy-Semibold !important; 
font-size: 16pt !important;
}

After replacing the css, Please clear your browser cache and check.
If this doesn’t correct, please remove this css so I can try again, it’s a little hard to test when the wrong css is in place.

Best regards,
Mike

Hey entrepreneurgirl,
Sorry for the late reply, the error you are seeing on your homepage is because you have a layerslider element on your homepage, but you have no sliders. To correct please remove the element from your page:

As you customize your site with new images or text you won’t need to worry about losing these changes when the site updates. As you make customizations in the “advanced stylings” panel you won’t lose any of those settings when you update either.

If you make css customizations and add the css to the Quick CSS field, this will also be safe from updates:

But if you plan to add functions in the functions.php file you will lose this when your site updates, so in this case installing the child theme will protect your changes when you add the functions to the child theme functions.php.
Please use our prebuilt Child Theme here.
For the preloader, you can have it show only on the homepage with a function, but we don’t have a function to show it only once per session. Please see this solution or this solution.
Please let us know if this helps.

Best regards,
Mike

Hi,
Thanks for the feedback, is the red logo in my screenshot the correct one? I couldn’t login to see why this css was not working for you like it is in my test, please renew the temp login token above so I can investigate further.

One reason it may not work for you is if you copied the css from an email instead of the support page and the quotes in the code turned into curly quotes, or if some of your other css has a missing bracket causing this css to be void. I’ll know better once I can test.

Best regards,
Mike

Hi,
Glad to hear you have it resolved, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hey Chris,
Thank you for the link to a mock-up, this can be created by using a grid row element with two cells set at 100% visual height,

each cell with a background image, and the sidebar, footer, header, and title bar all set to hidden in the “layout” option for the page:

For a gray scale background image that changes to color on hover, use this css:

.left-side-split,.right-side-split {
	    filter: grayscale(1);
}
.left-side-split:hover,.right-side-split:hover {
	    filter: grayscale(0);
}

please note the custom classes for the two cells, the classes are added to via the Enfold Theme Options > Layout Builder > Show element options for developers setting.
Frontend results:

You can then add logos, text, and links to each cell.
The tricky part will be to create a 45 degree edge between the two images, but there are many css tutorials that can help with this, such as this video: https://youtu.be/A11xEtSNDr8
I hope this helps to get you started with this.

Best regards,
Mike