Hey JannyPolak,

Thank you for the inquiry.

Looks like the Advanced Styling settings may be getting overridden by another css rule, or the styles may be cached. Before anything else, please try to disable the Enfold > Performance > File Compression settings, save, and purge your cache, then check again.

If the styling still doesn’t apply, you can force the font and text-transform for the main nav links with this custom css added on the Enfold > General Styling > Quick CSS field:

#top .av-main-nav > li > a > .avia-menu-text {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
}

Make sure Josefin Sans is loaded on your site. If you’re using it via Enfold > Advanced Styling, it should already be enqueued. If not, you may need to select it under Enfold > General Styling > Fonts.

Please make sure to purge the cache before testing.

Let us know if the issue persists.

Best regards,
Ismael

Hey Elena,
It looks like you want the font size to be 14px, but you have a Advanced Styling set to 18px which overrides it:

Since this size is for your whole site, try this css just for the testimonials:

#top .all_colors .avia-testimonial-content p em {
    font-size: 14px;
} 

Best regards,
Mike

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