Hi,
#3 try this css:

#top #header .av-main-nav > li.button.logo > a {
	font-size: 0;
}

#4

.av-main-nav ul li {
    list-style-type: none;
}

Best regards,
Mike

Hi,
Let’s try adding a custom class “custom-banner” to the div to better manage future changes, and change the font size for mobile from 22px to 12px, this will make the text on mobile closer to what you want, you can even try smaller if you find 12px still to big.
This is the new script:

function custom_banner_below_the_header_and_above_the_main_menu() { ?>
  <script>
// Create the new div element
const newDiv = document.createElement('div');

// Set a class for the new div
newDiv.className = 'custom-banner';

// Set the text content
newDiv.textContent = 'The Most Comprehensive Alternative Wellness Experience In The Midwest';

// Set the style properties for screens above 768px
newDiv.style.backgroundColor = 'gray';
newDiv.style.color = 'white';
newDiv.style.fontSize = '22px'; // Default font size for larger screens
newDiv.style.padding = '10px';

// Add the flexbox properties
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.order = '4';
newDiv.style.flexBasis = '100%';

// Find the element with class "main_menu"
const mainMenu = document.querySelector('.main_menu');

// Insert the new div before the main_menu
if (mainMenu) {
  mainMenu.parentNode.insertBefore(newDiv, mainMenu);
}

// Adjust styles based on screen width
function adjustStyles() {
  if (window.innerWidth < 768) {
    newDiv.style.fontSize = '12px'; // Font size for screens below 768px
  } else {
    newDiv.style.fontSize = '22px'; // Font size for screens 768px and above
  }
}

// Initial adjustment
adjustStyles();

// Adjust on window resize
window.addEventListener('resize', adjustStyles);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_banner_below_the_header_and_above_the_main_menu', 99 );

Please give this a try.

Best regards,
Mike

Hi,

.archive .container_wrap_first p {
	font-size: 20px;
}

adjust to suit.

Best regards,
Mike

Hi,
Try this css:

#top #main .sidebar_left .sidebar {
    border-right-style: none; 
}
.archive h1.av-banner-description p {
	font-size: 80px;
}

Best regards,
Mike

Hi,
Thanks for your screenshot, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function banner_below_the_header_and_above_the_main_menu() { ?>
  <script>
// Create the new div element
const newDiv = document.createElement('div');

// Set the text content
newDiv.textContent = 'The Most Comprehensive Alternative Wellness Experience In The Midwest';

// Set the style properties
newDiv.style.backgroundColor = 'gray';
newDiv.style.color = 'white';
newDiv.style.fontSize = '22px';
newDiv.style.padding = '10px'; 

// Add the flexbox properties
newDiv.style.display = 'flex';
newDiv.style.justifyContent = 'center';
newDiv.style.order = '4';
newDiv.style.flexBasis = '100%';

// Find the element with class "main_menu"
const mainMenu = document.querySelector('.main_menu');

// Insert the new div before the main_menu
if (mainMenu) {
  mainMenu.parentNode.insertBefore(newDiv, mainMenu);
}
</script>
  <?php
}
add_action( 'wp_footer', 'banner_below_the_header_and_above_the_main_menu', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
See the expected results in the screenshot below.

Best regards,
Mike

Hey amyncuih,

Thank you for the inquiry.

The content in the table inherits the Default Content Font Size, which can be adjusted in the Enfold > General Styling > Typography tab or the Enfold > Advanced Styling panel. You can also use this css code:

.avia-table {
    font-size: 18px;
}

Best regards,
Ismael

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