Hi,

Thanks for the clarification. This is what is currently applying to that button:

#mlb2-17812585.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background-color: #1c3052 !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer;
  font-family: 'Nunito', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
  height: auto;
  padding: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

As you can see, the !important statement is added to all the attributes, so I’m not sure if you can override them. You might want to reach out to the plugin developers for further help if you can’t get your CSS to work.

Best regards,
Rikard

Hey leeweis,

Did you try setting different font sizes for different resolutions under Enfold->General Styling->Typography?

Best regards,
Rikard

Hey dmansouri1981,

Thank you for the inquiry.

You can use the Promobox shortcode in a Text or HTML widget. Example:

[av_promobox button='yes' label='Click me' icon_select='no' icon='' label_display='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' gradient_color_direction='vertical' gradient_color_1='#000000' gradient_color_2='#ffffff' gradient_color_3='' border_promo='' border_promo_width='' border_promo_color='' border_radius_promo='' box_shadow_promo='' box_shadow_promo_style='0px' box_shadow_promo_color='' link='' link_dynamic='' link_target='' title_attr='' hover_opacity='' sonar_promo_effect='' sonar_promo_color='' sonar_promo_duration='1' sonar_promo_scale='' sonar_promo_opac='0.5' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' element_template='' one_element_template='' show_locked_options_fakeArg='' av_uid='' sc_version='1.0']
Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!
[/av_promobox]

Best regards,
Ismael

Hi,

Thank you for the update.

Is this only happening on tablet view or smaller screens? You could set the Enfold > Main Menu > General > Menu Items For Mobile setting to the second option (Activate for Smartphones and Tablets). You can also decrease the font size of the Main Menu Links element in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hi,

Is it possible to set these parameters for the three resolutions desktop, tablet and mobile?

Yes, that should be possible. Please add the following code and adjust the values as needed.

/* Styles for tablets */
@media (max-width: 1024px) {
    .responsive #top .avia-icon-circles-icon {
        height: 100px;
        width: 100px;
        line-height: 100px;
        font-size: 60px;
        margin: -50px;
    }
}

/* Styles for mobile devices */
@media (max-width: 768px) {
    .responsive #top .avia-icon-circles-icon {
        height: 80px;
        width: 80px;
        line-height: 80px;
        font-size: 45px;
        margin: -40px;
    }
}

Best regards,
Ismael

Hey joguitar,

Thank you for the inquiry.

To fix the alignment, please replace the css with the following code:

.responsive #top .avia-icon-circles-icon {
    height: 120px;
    width: 120px;
    line-height: 120px;
    font-size: 75px;
    margin: -60px;
}

Best regards,
Ismael

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