Hi,
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the code and save.

Best regards,
Mike

Hi,
It would be easier to help you if you had a test page that we could see, but as I look at your css above the code for the image background has too many places, most browsers only support six places in a color code, and you are adding a background to an image on hover which you will not see, because it is behind the image.
Try using a grayscale filter on the image like this:

#top .layout-wholebox:hover .layout-image {
transition: opacity 0.4s ease-in-out !important;
filter: grayscale(100%);
}

Here is an example of some other filters that you can use.

Best regards,
Mike

Hi,
To change the color of the widget title for both pages try this css:

#top #wrap_all .all_colors .widgettitle,
#top #custom_html-2 > h3.widgettitle {
	  color: #000000;
    text-transform: none;
    font-size: 23px;
    font-weight: 200;
}

to show the footer on tablet you need to change the css to show for tablet, we will say it is 768px, so use this:

@media only screen and (min-width: 768px) {
#top:not(.page-id-3288,.page-id-3593) #footer {
display: none;
}
}
@media only screen and (max-width: 767px) {
#top #footer {
display: none;
}
}

some tablets are different sizes like 1024px & 1366px, but 768px should cover all of them.

Best regards,
Mike

Hey Renard,

Thank you for the inquiry.

You can add this css code to decrease the height of the color section and adjust the position of the floating image:

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_column.av-lu0i0x4l-8e878727dd70b1d7d7004e10aa47c98c {
    margin-top: -180px;
    margin-bottom: -50px;
  }

  .responsive #top.page-id-261 #av_section_1 {
    height: 400px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

– I would like to have a space between the buttons and the message bar.
– Also, a slight shadow above the entire cookie-bar would be nice
– and a slightly larger font only in the mobile version

You can add this css code to adjust the style of the consent box based on your description above.

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

  /* Add your Mobile Styles here */
  .responsive #top .avia_cookie_text {
    margin-bottom: 10px;
  }

  .responsive #top .avia-cookie-consent p {
    font-size: 14px;
    line-height: 1.2em;
  }

  .avia-cookie-consent a.avia_cookie_infolink,
  .avia-cookie-consent p,
  .avia-cookie-consent .avia-cookie-consent-button {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    letter-spacing: 0.05em;
  }

  .avia-cookie-consent {
    box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1)
  }
}

Best regards,
Ismael

Hi,

Have you tried disabling autoplay (Enable Autoplay) and making sure that the video is not muted (Mute Video Player)? The theme will automatically set the volume to 100% if autoplay is disabled, and users can then control the volume using the physical buttons on their devices. Alternatively, you can upload the video to YouTube or Vimeo to use their default media players.

Best regards,
Ismael

Hi,

Thank you for the update.

Have you made any changes to the arrows? To fix the styling issue with the arrows on the tag and category pages, please add the following css code:

.grid-content .avia-arrow, .tag .grid-content .avia-arrow {
    z-index: 10;
    border: none;
    top: -5px;
}

.grid-content .entry-content-header {
    z-index: 20;
    position: relative;
}

.tag .grid-content {
    position: relative;
}

.tag .grid-content .avia-arrow {
    border: none;
    top: -11px;
}

Best regards,
Ismael

Hi,

Thank you for the clarification.

You can add this css code to adjust the size of the burger menu on mobile view:

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

  /* Add your Mobile Styles here */
  .av-hamburger-box {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    top: 10px;
  }

  .av-hamburger-inner::before {
    top: -7px;
  }

  .av-hamburger-inner::after {
    bottom: -7px;
  }
}

Best regards,
Ismael

Hi,
When I check your page on desktop the css I posted above is not applied, and this is what makes the button larger and center, so I don’t know if you have an error in your css, or if you didn’t add it because you didn’t understand, but this is the desktop part of the css that you should ensure to use:

@media only screen and (min-width: 768px) { 
#top .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: relative;
    text-align: center;
}
#top .slideshow_inner_caption .avia-slideshow-button.avia-button {
    width: 300px;
    height: 100px;
    font-size: 24px;
}
.html_header_transparency #top #main .caption_bottom .slideshow_caption {
    padding-top: 0;
}
}

this is the result:

I now assume that you now wanted the button to move up a little, so you would then add this css:

@media only screen and (min-width: 768px) { 
.slideshow_inner_caption {
	top: -100px;
}
}

for this result:

feel free to adjust to suit.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 450px) { 
.slideshow_inner_caption {
	top: -30px;
}
}

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

Best regards,
Mike

Hi,

Great, I’m glad to hear that it’s working as it should. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

The settings in Enfold for the video is NOT SET TO MUTE!

Yes, that is correct, but it is set to autoplay, and as we mentioned before, the theme automatically mutes the video if autoplay is enabled. Please review the link to the browser policy for autoplay provided above.

Best regards,
Ismael

Hi,

Thank you for the update.

The toggles are not working properly even in desktop view. Have you tried to temporarily disable the plugins? We have found an error in the console which might be causing the issue.

Uncaught TypeError: $.avia_utilities.supports is not a function
    at avia_hover_effect (avia.js:780:32)
    at $.avia_utilities.avia_ajax_call (avia.js:210:3)
    at HTMLDocument.<anonymous> (avia.js:101:26)
    at e (jquery.min.js:2:27028)
    at t (jquery.min.js:2:27330)

Best regards,
Ismael