Hi,
Perhaps I read your question too quickly, I was looking for the css in the June 28 2023 post and this css in not in your Quick CSS.
But this code that is in your Quick CSS doesn’t belong there:

 add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );
    function enfold_customization_modify_thumb_size( $size ) {
    $size['entry_without_sidebar'] = array('width'=>1200, 'height'=>630, 'crop' => true);
    return $size;
    }

It belongs in your child theme functions.php file, but you are not using a child theme so it was probably in your Enfold functions.php and when you updated it was lost along with any other customizations.
If you are not going to use 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 and you won’t lose it on updates.
Remember that for any new images that you added you will need to Regenerate the Thumbnails for the change to show.

Best regards,
Mike

Hey Gianluca,
I assume that you mean this element:

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

#top #av_section_1.main_color .av_textblock_section .avia_textblock table,
#top #av_section_1.main_color .av_textblock_section .avia_textblock div,
#top #av_section_1.main_color .av_textblock_section .avia_textblock td {
	border-color: transparent;
	background: transparent;
}

#top #av_section_1.main_color tr:nth-child(odd) {
    background: transparent;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
This is the expected results:

Best regards,
Mike

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

#top .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
}
#top .av-hover-overlay-active .av-masonry-entry:hover .av-masonry-image-container {
	opacity: 0.7;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey limedrop,
The Dev Team is currently investigating this, but we don’t have any details to share at this time, When the Dev Team has more information they may reply here as this thead is in their notes, or please keep an eye on our Enfold – Upcoming fixes thread.
Thank you for your patience, and for using Enfold.

Best regards,
Mike

Hey MM,
The Dev Team is currently investigating this, but we don’t have any details to share at this time, please keep an eye on our Enfold – Upcoming fixes thread this will be the first place further information about this will be posted.
Thank you for your patience, and for using Enfold.

Best regards,
Mike

Hey Munford,
Your css for 2em on mobile is working when I check, except for the first one that has it’s own css:

#top .heliko .av-image-caption-overlay-center {
    font-size: 4em !important;
}

Try changing the hotspot animation in the element settings:

Best regards,
Mike

Hi,
Thank you for your patience, I was not able to find a solution with the built-in theme options, but I was able to come up with a shortcode that will do as you asked, since your page is black I styled it accordingly and this is the expected results:

Since you are not using a child theme I recommend using 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 below code and save.

function garden_progress_bars_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'pre_cultivation_start' => '',
            'pre_cultivation_end' => '',
            'planting_start' => '',
            'planting_end' => '',
            'harvest_start' => '',
            'harvest_end' => '',
            'pre_cultivation_color' => '',
            'planting_color' => '',
            'harvest_color' => '',
            'pre_cultivation_label' => '',
            'planting_label' => '',
            'harvest_label' => '',
        ),
        $atts,
        'garden_progress_bars'
    );
    $output = '
    <style>
        .garden-progress-bars {
            font-family: Arial, sans-serif;
            max-width: 960px; 
            margin: 0 auto;
        }
        .progress-header, .progress-header div:not(.header-offset) {
            display: inline-flex;
            width: 100%;
            justify-content: space-evenly;
        }
		.progress-header div:not(.header-offset) {
    		border-left: 1px solid #eee;
        }
        .month {
            width: calc((100% - 160px)/12); 
            text-align: center;
        }
        .progress-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .label-container {
            width: 150px; 
            text-align: right;
            padding-right: 10px; 
        }
        .progress-container {
            display: flex;
            width: calc(100% - 160px); 
            align-items: center;
        }
        .progress-bar-container {
            flex-grow: 1;
            background-color: #000;
            height: 20px;
            position: relative;
        }
        .progress-bar {
            height: 100%;
            position: absolute;
        }
        .progress-header .header-offset {
            width: 150px;
			display: inline-flex;
            flex-shrink: 0;
        }
    </style>
    <div class="garden-progress-bars">
        <div class="progress-header">
            <div class="header-offset"></div>'; 
    $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    foreach ($months as $month) {
        $output .= "<div class='month'>$month</div>";
    }
    $output .= '</div>'; 
    $create_progress_bar_row = function($label, $color, $start, $end) use ($months) {
        $start_month_index = array_search($start, $months);
        $end_month_index = array_search($end, $months);
        $width = (($end_month_index - $start_month_index + 1) / 12) * 100;
        $left = ($start_month_index / 12) * 100;
        return "
        <div class='progress-row'>
            <div class='label-container'>$label</div>
            <div class='progress-container'>
                <div class='progress-bar-container'>
                    <div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'></div>
                </div>
            </div>
        </div>";
    };
    $output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end']);
    $output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end']);
    $output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end']);

    $output .= '</div>'; 

    return $output;
}
add_shortcode('garden_progress_bars', 'garden_progress_bars_shortcode');

and then on your page add this shortcode in a code block element to show the growing bars:

[garden_progress_bars pre_cultivation_start="Feb" pre_cultivation_end="Apr" pre_cultivation_color="#FF5733" pre_cultivation_label="Pre-cultivation" planting_start="Apr" planting_end="Jun" planting_color="#5EBA7D" planting_label="Planting" harvest_start="Jun" harvest_end="Sep" harvest_color="#FFC300" harvest_label="Harvest"]

This shortcode creates three bars, and for each bar you can change the label text and color of bar and the start & end month.
First try this shortcode as is to see the working solution as in the screenshot above, then you can try adjusting the attributes to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

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

Best regards,
Rikard

Hi,

Thank you for the inquiry.

This is not possible because of browser policies. Automatically playing unmuted media files is not allowed, unless browser flags or options are edited, as you’ve found. Users need to manually play media files if audio is enabled. If muted autoplay is enabled, users will need to manually unmute the media file. For more info, please refer to the link below:

// https://developer.chrome.com/blog/autoplay
// https://support.mozilla.org/en-US/kb/block-autoplay

Best regards,
Ismael

Hey Lin84,

Thank you for the inquiry.

The layout you’re after isn’t available by default, but you can modify the existing Grid Layout with a few css tweaks. Add a Blog Posts element, set the Blog Style to Grid Layout, set the number of Columns as 2, and then adjust the other settings as you wish. Once done, you can apply the following css code to pull the content over the featured image.

.avia-content-grid-active .slide-entry-wrap .slide-content {
    margin: 0 20px;
    position: relative;
    top: -80px;
    background: #ffffff;
    padding: 0 24px;
}

Best regards,
Ismael

Hey Yaphoon,

Thank you for opening another thread.

1.) To adjust the breadcrumb trail, you can add the following filter in the functions.php file. Make sure to replace the value of the href attribute with the URL of the product page.

function avia_breadcrumbs_trail_mod($trail)
{
    if ( is_product() || is_product_category() ) {
        $trail[1] = '<a href="https://site.com/product" title="Product Page" rel="">Product</a>';
    }
    return $trail;
}
add_filter('avia_breadcrumbs_trail', 'avia_breadcrumbs_trail_mod', 50, 1);

2.) And to change the color of the breadcrumb trail, add this css code:

.stretch_full.container_wrap.alternate_color.title_container {
  background: #ffffff;
  color: #000000;
}

.alternate_color .breadcrumb, .alternate_color .breadcrumb a, #top .alternate_color.title_container .main-title, #top .alternate_color.title_container .main-title a {
  color: #000000;
}

Best regards,
Ismael

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

@media only screen and (max-width: 1440px){
.responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    width: 100%;
    display: block;
}
#main .avia-timeline-vertical.av-milestone-placement-left .av-milestone-content-wrap {
    width: 95%;
}
}

This should make the sections have 100% width up to 1440px and make the text bubble a better width.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike