Hey beyond-flora,
Try this code:

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' => '',
            'pre_cultivation_link' => '',
            'planting_link' => '',
            'harvest_link' => '',
        ),
        $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;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
        }
        .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, $link) 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;
        $bar_content = "<div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'>$label</div>";
        if ($link) {
            $bar_content = "<a href='$link' target='_blank' style='display: block; height: 100%;'>$bar_content</a>";
        }
        return "
        <div class='progress-row'>
            <div class='label-container'>$label</div>
            <div class='progress-container'>
                <div class='progress-bar-container'>
                    $bar_content
                </div>
            </div>
        </div>";
    };
    
    $output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end'], $atts['pre_cultivation_link']);
    $output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end'], $atts['planting_link']);
    $output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end'], $atts['harvest_link']);

    $output .= '</div>'; 

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

and this shortcode on your page:

[garden_progress_bars 
    pre_cultivation_start="Jan" 
    pre_cultivation_end="Mar" 
    pre_cultivation_color="green" 
    pre_cultivation_label="Pre-cultivation" 
    pre_cultivation_link="https://example.com/pre-cultivation"

    planting_start="Apr" 
    planting_end="Jun" 
    planting_color="blue" 
    planting_label="Planting" 
    planting_link="https://example.com/planting"

    harvest_start="Jul" 
    harvest_end="Sep" 
    harvest_color="orange" 
    harvest_label="Harvest" 
    harvest_link="https://example.com/harvest"
]

Each bar will be a link with a new label:

Best regards,
Mike

Hey Gianluca,
Thanks for the login, in your Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text you had a phone number link that was unclosed, causing the error.
To make your portfolio sort text larger try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia-fullwidth-portfolio .sort_width_container {
	font-size: 30px;
} 

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.
Please adjust the font size to suit.

Best regards,
Mike

Hi,

Thanks for that. Please try to remove the !important bit from your CSS, then add this media query:

@media only screen and (max-width: 600px) {
#header_meta a {
  font-size: 12px;
}
#header_meta .sub_menu li ul {
  left: 0;
}
}

Best regards,
Rikard

Hi,
Thanks for the test page, so to have a different SVG icon for each item you need to use a different font-icon for each item so you can use a different code in the css for each item:

I then copied the base css from the example link and added your font-icon codes and your SVG icon URLs:

[data-av_iconfont="entypo-fontello"][data-av_icon="\e89f"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/home-icon.png) !important}
[data-av_iconfont="entypo-fontello"][data-av_icon="\e8a0"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/people-icon.png) !important}
[data-av_iconfont="entypo-fontello"][data-av_icon="\e8a1"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/bed-icon.png) !important}
[data-av_iconfont="entypo-fontello"][data-av_icon="\e8a2"]:before{font-size:0;width: 50px; height: 50px; display: inline-block; background-size: contain;background-image: url(/wp-content/uploads/2024/08/bath-icon.png) !important}

Then to make the gray backgrounds transparent I added this css:

.page-id-321 .main_color .avia-icon-list .iconlist_icon {
    background-color: transparent;
}

This is the result:

Best regards,
Mike

Hi,
As I understand your test site outer box shadow works good:

but your live site is not:

I first note that in your code block you have HEAD & BODY tags please don’t add these, I also note that your page is not published, the WordPress preview will not always display the page correctly, I also see that your HTML in the code block adds css for “.container” & “body” that targets the page and not just the code block element.
So I remove the HEAD & BODY tags, change “.container” to “.zip-container” and publish, and now it is mostly correct:

the corrected code:

<script>
var gform;gform||(document.addEventListener("gform_main_scripts_loaded",function(){gform.scriptsLoaded=!0}),window.addEventListener("DOMContentLoaded",function(){gform.domLoaded=!0}),gform={domLoaded:!1,scriptsLoaded:!1,initializeOnLoaded:function(o){gform.domLoaded&&gform.scriptsLoaded?o():!gform.domLoaded&&gform.scriptsLoaded?window.addEventListener("DOMContentLoaded",o):document.addEventListener("gform_main_scripts_loaded",o)},hooks:{action:{},filter:{}},addAction:function(o,n,r,t){gform.addHook("action",o,n,r,t)},addFilter:function(o,n,r,t){gform.addHook("filter",o,n,r,t)},doAction:function(o){gform.doHook("action",o,arguments)},applyFilters:function(o){return gform.doHook("filter",o,arguments)},removeAction:function(o,n){gform.removeHook("action",o,n)},removeFilter:function(o,n,r){gform.removeHook("filter",o,n,r)},addHook:function(o,n,r,t,i){null==gform.hooks[o][n]&&(gform.hooks[o][n]=[]);var e=gform.hooks[o][n];null==i&&(i=n+"_"+e.length),gform.hooks[o][n].push({tag:i,callable:r,priority:t=null==t?10:t})},doHook:function(n,o,r){var t;if(r=Array.prototype.slice.call(r,1),null!=gform.hooks[n][o]&&((o=gform.hooks[n][o]).sort(function(o,n){return o.priority-n.priority}),o.forEach(function(o){"function"!=typeof(t=o.callable)&&(t=window[t]),"action"==n?t.apply(null,r):r[0]=t.apply(null,r)})),"filter"==n)return r[0]},removeHook:function(o,n,t,i){var r;null!=gform.hooks[o][n]&&(r=(r=gform.hooks[o][n]).filter(function(o,n,r){return!!(null!=i&&i!=o.tag||null!=t&&t!=o.priority)}),gform.hooks[o][n]=r)}});

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('zipcodeForm');
    const input = document.getElementById('zipcodeInput');
    const errorMessage = document.getElementById('errorMessage');

    fetch('https://welsbpo.net/wp-content/uploads/zipcodes.json')
        .then(response => response.json())
        .then(zipcodeData => {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                const zipcode = input.value.trim();

                if (zipcodeData[zipcode]) {
                    window.location.href = zipcodeData[zipcode];
                } else {
                    errorMessage.textContent = 'Zipcode not found. Please try again.';
                }
            });
        })
        .catch(error => {
            console.error('Error fetching zipcode data:', error);
            errorMessage.textContent = 'An error occurred. Please try again later.';
        });
});
</script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-color: #f0f0f0;
        }

        .zip-container {
            background-color: white;
            padding: 2rem !important;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h3 {
            margin-bottom: 1rem;
        }

        form {
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }

        input {
            padding: 0.5rem;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px 0 0 4px;
        }

        button {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .error {
            color: red;
        }
    </style>
    <div class="zip-container">
        <h3>Zipcode Redirect</h3>
        <form id="zipcodeForm">
            <input type="text" id="zipcodeInput" placeholder="Enter zipcode" required>
            <button type="submit">Go</button>
        </form>
        <p id="errorMessage" class="error"></p>
    </div>

Best regards,
Mike

Hi,
Thanks, this page has a page ID class of: page-id-17847 and since there is only one scroll-down-link you can just use this:

#top.page-id-17847 .scroll-down-link {
color: red !important;
font-size: 150px !important;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4) !important;
}

Best regards,
Mike

Hi,

Please try this CSS instead:

.grid-entry .grid-entry-excerpt {
  color: #000;
  font-size: 16px;
  text-align: left;
  font-style: normal;
}

Best regards,
Rikard

Hi,

Thank you for the update.

You can either decrease the size of the font to make sure it fits in the container or add this css code to change how words or text breaks.

#top #wrap_all .av-inherit-size .av-special-heading-tag {
    word-wrap: break-word;
}

Best regards,
Ismael

Hey rixi,

Please try the following in Quick CSS under Enfold->General Styling:

.grid-entry .grid-entry-excerpt {
  color: #000;
  font-size: 16px;
}

Best regards,
Rikard

Hi,

Thank you for the update.

The implementation above relies on the “data-copy” attribute, which cannot be added to any builder elements. You may need to manually copy the HTML into a code or text block. If you need it to look like a default builder button, you can try this html:

<div class="avia-button-wrap avia-button-center">
    <a href="javascript:void(0);" 
       class="avia-button av-lzt94u23-6a241e487832b9aa657eb8d56d62aa80 av-link-btn avia-icon_select-yes-left-icon avia-size-small avia-position-center avia-color-theme-color btn-copy js-tooltip js-copy"
       data-toggle="tooltip"
       data-placement="bottom"
       data-copy="https://urltocopy.com/test/"
       title="Copy URL"
       onclick="var tempInput = document.createElement('textarea'); tempInput.value = this.getAttribute('data-copy'); document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); alert('URL copied to clipboard: ' + tempInput.value);">
        <span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>
        <span class="avia_iconbox_title">Click me</span>
    </a></div>

Best regards,
Ismael

Hey spokerstradingco,

Thank you for the inquiry.

On smaller screens, the font size is set to 0.8em. Did you configure the font size for different screen sizes (Styling > Font Sizes > Heading Font Sizes)?

#top #wrap_all .av-special-heading.av-lxums4ni-4f37f7f215843741833d4240ad4206d4 .av-special-heading-tag {
    font-size: 0.8em;
}

Best regards,
Ismael

Hi,
Thanks for the links to your pages, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 425px) { 
#top #wrap_all #main .avia-slideshow .av-slideshow-caption .avia-caption-title,
#top #wrap_all #main .avia-slideshow .av-slideshow-caption .avia-caption-content p,
#top #main .avia-slideshow .av-slideshow-caption .avia-caption-content {
    font-size: 20px;
    margin: 0;
}
.html_header_transparency #top #main .avia-builder-el-0 .slideshow_caption {
	padding-top: 0;
}
}

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

Best regards,
Mike

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

@media only screen and (max-width: 425px) { 
	.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 0;
}
#top #wrap_all #main .avia-slideshow .avia-caption-title {
    font-size: 40px;
}
}

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

Best regards,
Mike

Hi,

Please try this as well:

#av-burger-menu-ul .menu-item-has-children .sub-menu li a .avia-menu-text {
  font-size: 14px; 
}

Best regards,
Rikard

Hi,
I added your horizontal gallery to your archive pages with this function.php file:

add_action('ava_after_main_container', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if ( is_archive() ) {
		echo do_shortcode("[av_horizontal_gallery ids='3297,3299,3315,3298,3318,3308,3316,3303,3317' ids_dynamic='' initial='' img_copyright='' height='20' size='large' gap='no' active='' control_layout='av-control-hidden' slider_navigation='av-navigate-arrows av-navigate-dots' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' lightbox_arrow_color='' lightbox_arrow_bg_color='' img_copyright_font='' av-desktop-font-img_copyright_font='' av-medium-font-img_copyright_font='' av-small-font-img_copyright_font='' av-mini-font-img_copyright_font='' img_copyright_color='' img_copyright_bg='' transition_speed='' autoplay='true' interval='3' manual_stopper='aviaTBmanual_stopper' links='active' link_dest='' lightbox_text='' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-a6srr' sc_version='1.0'][/av_horizontal_gallery]");
	}
}

please check.

Best regards,
Mike

Hey leloux,

Please try the following in Quick CSS under Enfold->General Styling:

#av-burger-menu-ul .menu-item-has-children .sub-menu li a {
  font-size: 14px; 
  color: red;
}

Best regards,
Rikard