Hi,

The “Responsive Site” option of the theme is disabled. Please enable it in the Enfold > General Layout > Dimensions panel.

Ismael, for me to use the background-size Property do I need to create a class for each image size? How do I enter custom css? Do you simulate for me a line of code?

The idea is to use different sizes of the image on different screen sizes. Edit the color section element then apply a unique ID in the Section ID field, use “custom-section” for example. We can use this ID to change the image on different screen sizes. Add this code in the Quick CSS field.

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    #custom-section {
       background-image: url(IMAGE URL FOR IPAD) !important;
    }
}

/* Mobile Styles */
@media only screen and (max-width: 767px) {
    #custom-section {
       background-image: url(IMAGE URL FOR IPHONE) !important;
    }
}

Create different sizes of the image then adjust the background image url or value.

Best regards,
Ismael

Hey thatcommsguy,

Thank you for using Enfold.

Add the is_singular conditional function.

// https://codex.wordpress.org/Function_Reference/is_singular

if( is_page(array('academy','learning-with-us')) || is_singular('tribe_events'))

Best regards,
Ismael

Hi,

Why is the “avia_apply_quant_btn” function empty? Did you place it somewhere else? Please post the FTP details here so that we can check this further.

Best regards,
Ismael

Hi,

It’s the “double quotes” that’s causing the issue. Replace it with a single quote.

$sub .= "<a href='javascript:javascript:history.go(-1)' class='terug'>Terug</a>";

Best regards,
Ismael

Hi,

Thank you for the update.

Please add this in the Quick CSS field.

@media only screen and (max-width: 1024px) {
.responsive #top #wrap_all #header {
    position: relative;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: 1;
}

.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}

.container #advanced_menu_toggle, #advanced_menu_hide {
    display: block;
}

.responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
}
}

Best regards,
Ismael

Hi,

1.) The video in the slider is disabled on mobile by default so it is required to add a fallback image. If you really need a video on mobile view, you have to replace it with an actual video element and toggle the display properties with css media queries as described on the previous thread. For the captions, you can use the text block element.

2.) That is the default backdraft of the youtube iframe. I’m sorry but you can’t change it.

Best regards,
Ismael

Hi,

Thank you for the update. Please remove browser cache or hard refresh the page. Or provide the login details in the private field so that we can check the issue further.

Best regards,
Ismael

Hi,

Remove the other html codes and use the following script in a text or code block.

<script>
(function() {
var cx = ‘010941995792013317955:a_bthajs1ss’;
var gcse = document.createElement(‘script’);
gcse.type = ‘text/javascript’;
gcse.async = true;
gcse.src = ‘https://cse.google.com/cse.js?cx=’ + cx;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search></div1>

Best regards,
Ismael

Hi,

Please turn on the custom css class field, add a unique class attribute to the slider then apply the following css code.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-fullscreen-slider .avia-slideshow > ul > li:first-child {
     background-image: url(IMAGE URL HERE) !important;
  }
}

Replace the selector “.avia-fullscreen-slider” with the custom css class attribute.

Best regards,
Ismael

Hi,

Please add this code in the Quick CSS field.

#top .gform_wrapper input, #top .gform_wrapper select {
    margin-bottom: 0;
    min-width: auto;
    width: 100%;
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px;
    border-radius: 2px;
}

#top .gform_wrapper .gfield_required {
    color: #109bc5 !important;
}

Best regards,
Ismael

Hey kenwae,

Thank you for using Enfold.

The feature, unfortunately, is not implemented in the theme yet but other users found a plugin which works well with posts but not pages.

// https://kriesi.at/support/topic/enfold-amp-accelerated-mobile-pages/#post-723062
// https://kriesi.at/support/topic/amp-pages/#post-701007

Best regards,
Ismael

Hi,

Please check the Enfold > Header > Header Title and Breadcrumbs settings. Make sure that the title and breadcrumb is enabled. Or edit the page then set the Layout > Title Bar Settings accordingly.

Best regards,
Ismaelo

Hi,

The WP_MEMORY_LIMIT is set to 40MB and the current memory usage is over that limit which is 50.61MB when you’re on the advance layout builder. Please increase the WP_MEMORY_LIMIT to at least 128M.

// https://docs.woocommerce.com/document/increasing-the-wordpress-memory-limit/

Best regards,
Ismael

Hey DROR,

Thank you for using Enfold.

I’m sorry but I’m not really sure what to look for here. Could you please provide a screenshot of the issue? We usually suggest the following plugin.

// https://wordpress.org/plugins/menu-items-visibility-control/

If you’re familiar with the Widget Logic plugin, I’m sure you can easily configure this one.

Best regards,
Ismael

Hi,

The code is working when I test it in the browser inspector. However, you might need to add a few adjustments to the code for mobile view or for smaller screens. Please post the login details here so that we can test it further.

Best regards,
Ismael