Hey bemodesign,
Try this css:

@media only screen and (max-width: 767px) {
    #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
        font-size: 22px;
    }
    .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li,.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li li {
    line-height: 1em;
		}
		.responsive #top #wrap_all #av-burger-menu-ul li {
    font-size: 22px !important;
		}
} 

Adjust to suit.
As for your anchor link, the ID #book-call is in the second section column with the title “Free 15-Minute…” if you want the first section title “CONTACT BEMO DESIGN” to show, then move the ID to that section.

Best regards,
Mike

Hi,

Thank you for the screenshot.

We couldn’t reproduce the alignment issue on smaller screens on our end. For the table text size, you can try adding this to Enfold > General Styling > Quick CSS or your child theme’s style.css file:

.t3-widget-root .t3-table tbody tr td {
    font-size: 20px;
}

Please make sure to purge the cache before testing.

For any other styling issues specific to the booking module itself, we recommend keeping in touch with the Tomm Booking support team since we don’t provide support for third-party plugins. They’ll be in the best position to help you with additional configuration options.

Let us know if you have more questions.

Best regards,
Ismael

Hey debbiepeverelli,

Thank you for the inquiry.

1. The overlapping image is likely due to the absolute positioning, which causes it to appear incorrectly scaled on smaller screens. The best approach is to either hide it on mobile or manually adjust its size using css media queries.

You may need to apply a custom css class name to the overlapping image element.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Once you have added a custom class, for example av-overlap-image, you can target it on smaller screens like this:

@media only screen and (max-width: 767px) {
    .av-overlap-image {
        display: none;
    }
}

Or if you prefer to keep it visible but resize it:

@media only screen and (max-width: 767px) {
    .av-overlap-image {
        width: 80px;
        height: auto;
        top: 20px;
        left: 10px;
    }
}

You can add these css rules to Enfold > General Styling > Quick CSS field and adjust the values as needed.

2. The light blue highlight on focused fields and the green success message are default styles applied to the contact form. You can override them by adding the following to Enfold > General Styling > Quick CSS field — adjust the color values to match your site:

#top .avia-form .avia-input:focus,
#top .avia-form .avia-textfield:focus {
    background-color: #yourcolor;
    border-color: #yourcolor;
}

#top .avia-form .avia-success {
    background-color: #yourcolor;
}

#top .avia-form .avia-success p {
    font-family: inherit;
    font-size: inherit;
    color: #yourcolor;
}

Replace #yourcolor with the hex values that match your site palette.

Let us know the result.

Best regards,
Ismael

Hi,
Try this css:

.avia-button.avia-size-large.av-1b88t-1848646851a5a8989084337c098e76b2 {
	font-size: 20px;
}

Best regards,
Mike

Hi,
For that page try adding this css:

.page-id-4370 .iconbox_left_content.avia-builder-el-9 .avia-icon-pos-left.av_font_icon{
  float: none;
  margin-right: 0;
  vertical-align: middle;
  display: inline-block;
  padding-left: 0.5em;
}
.page-id-4370 .iconbox_left_content.avia-builder-el-9 .iconbox_content_container strong {
  font-size: 15px;
}

Best regards,
Mike

Hi,

Odd. This is not the menu style I saw yesterday. Please try to use this css code instead:

#av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    color: #ffffff;
    font-size: 0.8em;
}

To add a submenu indicator, try to add this css code:

.av-width-submenu > a::after {
    content: "›";
    display: inline-block;
    margin-left: 6px;
    transform: rotate(90deg);
    font-size: 0.9em;
}

.av-width-submenu.av-show-submenu > a::after {
    content: "";
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Try this css code to adjust the color and font size of the submenu items.

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul li ul a {
    color: rgba(255,255,255) !important;
    font-size: 0.8rem;
}

The menu items with submenus should have angled brackets (>) by default.

Best regards,
Ismael

Hey dreyerjm,
Try is css:

.page-id-3710 .iconbox_left_content.avia-builder-el-4 .avia-icon-pos-left.av_font_icon{
  float: none;
  margin-right: 0;
  vertical-align: middle;
  display: inline-block;
  padding-left: 0.5em;
}
.page-id-3710 .iconbox_left_content.avia-builder-el-4 .iconbox_content_container strong {
  font-size: 15px;
}

Then clear your browser cache.

Best regards,
Mike

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