Hey Jan,
Thank you for opening the feature request, the Dev Team will review your recommendations/suggestions and reply there, Thank you for your patience.

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,
Good point Guenni007, I had assumed the second rule was not apart of the media query, but now I think you are correct and the blue one should be removed.

Best regards,
Mike

Hi,
Thank you for your patience, I believe that a hashtag in the category name could cause issues, since you say that removing the hashtag doesn’t solve but new categories without the hashtags work correctly, I recommend creating new categories and add them to your posts.

Best regards,
Mike

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

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thanks for the feedback, and glad to hear that the size of the red boxes was not due to a testing error, we will leave this open while you test your new element, if it solves or if you want more help just let us know. If you do want more help perhaps a mockup image of what you would like to see on mobile would help.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for the login to your site, it looks like the Page Preloading interferes with the script, I disabled it and now the page works correctly, please check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike