Hey EstudioNOVO,

Thank you for the inquiry.

The font size of the title and content can be adjusted directly in the Iconbox editor. To adjust the icon size, you can use the following css code:

.iconbox_content header .iconbox_icon svg {
    width: 30px !important;
    height: 30px !important;
    left: -3px;
    position: relative;
    top: -4px;
}

This assumes you have selected an SVG icon.

Best regards,
Ismael

Hey JennyGr,

1. The font size can be set in the element options, look in the Styling tab. I’m not sure which button you are referring to?

2. If you are referring to text like “A Morning in the Kindergarten”, then that is a b tag, not strong. Try using a strong tag instead, or use CSS to change it:

b {
  color: red;
}

Best regards,
Rikard

Hi,

Thank you for the update.

We adjusted the css code slightly. Please make sure to purge the cache before testing. You can also adjust the font size for different screen sizes in the Styling > Font Sizes panel of each slide.

Best regards,
Ismael

Hey jnightingale,

Thank you for the inquiry.

Try to add this css code to adjust the font size of the title on mobile view:

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-iakm6m-705446e7ab1d9a74581bf52b6294a15c__0 .avia-caption-title {
    font-size: 42px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the information.

To remove the background and border of the cells and place them side by side on mobile view, please add this css code:

.main_color .av-custom-table tr:nth-child(odd),
.main_color .av-custom-table tr:nth-child(even) {
    background: transparent;
    border: 0;
}

.av-custom-table, .av-custom-table td, .av-custom-table th {
    background: transparent;
    border: 0;
    font-size: 15px;
}

.av-custom-table tr {
    display: flex;
    gap: 10px;
}

Best regards,
Ismael

Hi,
I believe Ismael’s solution is for the masonry items (posts) were a custom field can be added, but you want to use masonry gallery images where the custom field is not an option.
Instead try this function in your child theme functions.php:

/**
 * Add SOLD overlay to specific masonry gallery items based on the data-av-masonry-item attribute
 */
function add_sold_overlay_to_masonry_gallery() {
    // Define which masonry items should show as SOLD
    $sold_items = array(973, 866, 865);
    
    // Convert to JavaScript array
    $sold_items_js = json_encode($sold_items);
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Items to mark as sold
        var soldItems = <?php echo $sold_items_js; ?>;
        
        // Add sold-item class to each specified masonry item
        soldItems.forEach(function(itemId) {
            $('.av-masonry-gallery .av-masonry-entry[data-av-masonry-item="' + itemId + '"]').addClass('sold-item');
        });
    });
    </script>
    
    <style>
    /* SOLD overlay styles */
    .av-masonry-entry.sold-item {
        position: relative;
    }

    .av-masonry-entry.sold-item::before {
        content: "SOLD";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 0, 0, 0.85);
        color: white;
        font-size: 24px;
        font-weight: bold;
        padding: 10px 30px;
        z-index: 10;
        letter-spacing: 2px;
        border: 3px solid white;
    }

    .av-masonry-entry.sold-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 9;
    }
    </style>
    <?php
}
add_action('wp_footer', 'add_sold_overlay_to_masonry_gallery');

At the top of the function define which masonry items should show as SOLD in this line:

$sold_items = array(973, 866, 865);

these are the media library attachment IDs

this is the result:

Best regards,
Mike

Hey ricedean,

Thank you for the inquiry.

You can try this filter in the functions.php file:

add_filter( 'avf_masonry_loop_entry_content', 'avf_masonry_loop_entry_content_mod', 10, 4 );

function avf_masonry_loop_entry_content_mod( $content, $entry, $entries, $key ) {
    $is_sold = get_post_meta( $entry->ID, 'sold', true );

    if ( $is_sold ) {
        $content .= '<span class="av-masonry-sold-overlay">SOLD</span>';
    }

    return $content;
}

Then add this css code:

.av-masonry-entry {
    position: relative;
}

.av-masonry-sold-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff0000;
    background: none;
    z-index: 10;
    pointer-events: none;
}

You’ll need to add a custom field named “sold” to each entry.

Best regards,
Ismael

Hi,

Thank you for the update.

Are you referring to the h1 in the Text Block element? The font size is added as an inline style, so you’ll need to remove it or override it with custom css.

<span style="font-family: montserrat, sans-serif; font-size: 64px;">Passerelles et Compétences</span>

Example:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  section.av_textblock_section.av-mfe046ge-53ca3090203dd5a03e44d0f3d1765a66 .avia_textblock h1 span {
    font-size: 42px !important;
  }
}

Best regards,
Ismael

Hey SurigliaStudio,
When I test your site the “Taglie” button doesn’t create a mobile style flyout menu, I assume that you now have the plugin disabled, but I think that I understand. I have created a custom function that will create a mobile style overlay menu from a sticky button on the right using a image that you can choose:


and on mobile the overlay is about 95% of the screen.
The function uses the Named Menus from your WordPress menus to show:

In Configuration there is a line to choose your menu image/icon and the default menu to show on all pages:

and below you can add as many additional menus with an array of pages that they will show on:

The code also has all of the css built-in for styling if you want to adjust.
Add this code to your child theme functions.php file, if you are not using 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 above code and save.

/**
 * Add Sticky Button with Fly-out Menu
 * Add this to your Enfold child theme's functions.php
 */

function custom_sticky_menu_button() {
    // Configuration - Change these values as needed
    $button_image = '/wp-content/uploads/2026/01/menu.png'; // Update path to your PNG
    $menu_slug = 'sticky menu'; // Default menu slug - change as needed
    
    // Optional: Set different menu based on page ID
    $current_page_id = get_the_ID();
    // Example: Use different menu for specific pages
     if (in_array($current_page_id, array(1028, 1080, 1031, 1034))) {
        $menu_slug = 'sticky menu two';
     }
	if (in_array($current_page_id, array(1376, 1331, 1277, 1283))) {
        $menu_slug = 'sticky menu three';
     }
    
    // Get the menu
    $menu_items = wp_get_nav_menu_items($menu_slug);
    
    if (!$menu_items) {
        return; // Exit if menu doesn't exist
    }
    ?>
    
    <!-- Sticky Button -->
    <div id="sticky-menu-btn" class="sticky-menu-button">
        " alt="Menu">
    </div>
    
    <!-- Fly-out Menu Overlay -->
    <div id="flyout-menu-overlay" class="flyout-menu-overlay">
        <div class="flyout-menu-close">×</div>
        <nav class="flyout-menu-content">
            <?php
            wp_nav_menu(array(
                'menu' => $menu_slug,
                'container' => false,
                'menu_class' => 'flyout-nav-menu',
                'fallback_cb' => false
            ));
            ?>
        </nav>
    </div>
    
    <style>
        /* Sticky Button Styles */
        .sticky-menu-button {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 9998;
            transition: opacity 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .sticky-menu-button img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .sticky-menu-button.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        /* Fly-out Menu Overlay */
        .flyout-menu-overlay {
            position: fixed;
            top: 0;
            right: -100%;
            width: 25%;
            height: 100vh;
            background: #fff;
            z-index: 9999;
            transition: right 0.4s ease;
            box-shadow: -2px 0 10px rgba(0,0,0,0.2);
            overflow-y: auto;
        }
        
        .flyout-menu-overlay.active {
            right: 0;
        }
        
        /* Close Button */
        .flyout-menu-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 36px;
            cursor: pointer;
            color: #333;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: color 0.3s ease;
        }
        
        .flyout-menu-close:hover {
            color: #000;
        }
        
        /* Menu Content */
        .flyout-menu-content {
            padding: 80px 30px 30px;
        }
        
        .flyout-nav-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .flyout-nav-menu li {
            margin: 0 0 15px 0;
        }
        
        .flyout-nav-menu a {
            display: block;
            padding: 12px 0;
            color: #333;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
            border-bottom: 1px solid #eee;
        }
        
        .flyout-nav-menu a:hover {
            color: #000;
        }
        
        /* Sub-menu styles */
        .flyout-nav-menu .sub-menu {
            list-style: none;
            margin: 10px 0 0 20px;
            padding: 0;
        }
        
        .flyout-nav-menu .sub-menu a {
            font-size: 14px;
            padding: 8px 0;
        }
        
        /* Mobile Styles */
        @media (max-width: 768px) {
            .flyout-menu-overlay {
                width: 95%;
            }
        }
    </style>
    
    <script>
        (function() {
            var btn = document.getElementById('sticky-menu-btn');
            var overlay = document.getElementById('flyout-menu-overlay');
            var closeBtn = document.querySelector('.flyout-menu-close');
            
            // Open menu
            btn.addEventListener('click', function() {
                overlay.classList.add('active');
                btn.classList.add('hidden');
                document.body.style.overflow = 'hidden'; // Prevent body scroll
            });
            
            // Close menu
            closeBtn.addEventListener('click', function() {
                overlay.classList.remove('active');
                btn.classList.remove('hidden');
                document.body.style.overflow = ''; // Restore body scroll
            });
            
            // Close on overlay click outside menu
            overlay.addEventListener('click', function(e) {
                if (e.target === overlay) {
                    overlay.classList.remove('active');
                    btn.classList.remove('hidden');
                    document.body.style.overflow = '';
                }
            });
        })();
    </script>
    
    <?php
}
add_action('wp_footer', 'custom_sticky_menu_button');

Adjust the image, menus, and page IDs to suit.

Best regards,
Mike

Hey a10plus,

It’s likely due to the CSS you have added in Quick CSS:

.faq-title h4 {
  margin: 0px !important;
  font-size: 16px !important;
  line-height: 22px !important;
  padding: 0 !important;
  color: #000000;
  font-weight: normal;

h1{
text-transform: none !important;
}

You need a closing curly bracket after the first block.

Best regards,
Rikard

Hey Angelo,

Thank you for the inquiry.

Try to add this code to the functions.php file to insert a go back button inside the header container.

add_action( 'ava_main_header', 'ava_main_header_mod' );
function ava_main_header_mod() {
    ?>
    <div class="ava-go-back-wrapper">
        <a href="javascript:history.back();" class="ava-go-back-button">Go Back</a>
    </div>

    <style>
        .ava-go-back-wrapper {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        .ava-go-back-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .ava-go-back-wrapper {
                display: flex;
            }
        }
    </style>

    <script>
        function closeBurgerMenu() {
            const burgerBtn = document.querySelector('.av-burger-menu-main .av-hamburger.av-js-hamburger');
            const overlay = document.querySelector('.av-burger-overlay');
            if (burgerBtn && burgerBtn.classList.contains('is-active')) {
                burgerBtn.classList.remove('is-active');
            }
            if (overlay) {
                overlay.style.display = 'none';
                overlay.style.opacity = '0';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            closeBurgerMenu();

            const goBackBtn = document.querySelector('.ava-go-back-button');
            if (goBackBtn) {
                goBackBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    closeBurgerMenu();
                    setTimeout(function() {
                        history.back();
                    }, 50);
                });
            }
        });

        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                closeBurgerMenu();
            }
        });
    </script>
    <?php
}

Best regards,
Ismael

Hi,

Sorry for the delay. Since removing the br tags also removes the list items, we used this css in the style.css file to hide the line breaks and display the list as a standard bullet list.

.av-masonry-entry-content ul br {
    display: none;
}

.av-masonry-entry-content ul li {
    padding-left: 10px;
	position: relative;
}

.av-masonry-entry-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1em;
    line-height: 1;
}

Please check the private field for the screenshot.

Best regards,
Ismael

Hi,

Thank you for the link.

Did you add this css code?

#top .fullsize .template-blog .post-title {
    text-align: left;
    font-size: 48px;
}

Try to override the font size with this code:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .fullsize .template-blog .post-title {
    font-size: 16px;
  }
}

Best regards,
Ismael