Hi,

Thank you for the update.

We adjusted the css code a bit. Please try it again:

@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
    font-size: 22px !important;
  }
}

Regarding the text color, please edit the slide, then configure the settings in the Styling > Colors panel.

Best regards,
Ismael

Hey aboutnina,

Thank you for the inquiry.

Please try to add this css code to adjust the font size of the caption title on mobile view:

@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
    font-size: 22px;
  }
}

Best regards,
Ismael

Hey Peter,

Thank you for the inquiry.

Are you using the Easy Slider element?

— You can change the heading default by editing any of the slides’ Advanced > Heading Tag settings.

— To center the caption and add a transparent overlay, try configuring the Styling > Caption > Caption Positioning settings.

— The font sizes can also be adjusted in the Styling > Font Sizes panel.

Best regards,
Ismael

Hey whdsolutions,

Thank you for the inquiry.

You can use this css code to adjust the style of the portfolio grid items:

#top .grid-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#top .main_color .grid-entry-title.entry-title {
    background: transparent;
    font-size: 1.8em;
}

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#top .av-control-minimal .avia-slideshow-arrows a::before {
  font-size: 40px;
  line-height: 10px;
}

Best regards,
Rikard

Hi,

Please try this CSS instead:

.iconbox_icon:before {
  font-size: 40px;
  position: absolute;
  left: 20%;
}

iconbox_icon {
  top: -33px;
}

Best regards,
Rikard

Hey jackis2,

Thank you for the inquiry.

You can use this css code to adjust the style of the phone number container:

#header_main .call {
    background: red;
    min-width: 400px;
    color: white;
    right: 10%;
    top: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: 'gotham-bold', sans-serif;
    font-size: 1.5em;
}

Best regards,
Ismael

Hey Qgrafica_7,

Please try the following in Quick CSS under Enfold->General Styling:

.iconlist_icon .iconlist-char:before {
  font-size: 60px;
}

Best regards,
Rikard

Hey Aeroviews,

That text gets its size from the paragraph element, you can set that size for each screen size under Enfold->General Styling->Typography. Change the default content font size option.

If you want to use custom CSS instead, then you can use this selector:

.iconbox_content_container p

Best regards,
Rikard

Hi,
Thanks for the screenshot, I have checked your page with Safari on a iMac, but the “Reader Mode” doesn’t seem to be an option, I don’t have a iPhone or iPad.
In my research I find that:

Safari Reader Mode is a feature in Apple’s Safari browser that simplifies web page content, removing distractions such as ads, navigation menus, and other non-essential elements.

This means that the browser is blocking items that it thinks is a distraction, further

Safari Reader Mode has some limitations when it comes to customization beyond font size and style. While you can adjust font size and color, there are no tweakable settings for reader view in Safari.

This is not an error in the theme, it is an issue with the “Reader Mode” blocking elements, I didn’t find any way that this can be changed. Since this is a browser setting for each user instead of the theme I don’t believe that you can turn off reader mode.

Best regards,
Mike

Hey Dzimnikov,

Thank you for the inquiry.

You might have added the shortcode of a Testmonial slider in the category description. Please try this shortcode:

[av_testimonials style='slider' columns='2' grid_style='' control_layout='av-control-default' slider_navigation='av-navigate-arrows' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' size-name='' av-desktop-font-size-name='' av-medium-font-size-name='' av-small-font-size-name='' av-mini-font-size-name='' size-subtitle='' av-desktop-font-size-subtitle='' av-medium-font-size-subtitle='' av-small-font-size-subtitle='' av-mini-font-size-subtitle='' size-content='' av-desktop-font-size-content='' av-medium-font-size-content='' av-small-font-size-content='' av-mini-font-size-content='' font_color='' custom_title='' custom_sub='' custom_content='' animation='fade' transition_speed='' autoplay='true' interval='5' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m15x5rhq' sc_version='1.0' admin_preview_bg='']
[av_testimonial_single name='Name' subtitle='' check='is_empty' element_template='' src='' src_dynamic='' link='https://' linktext='' one_element_template=''  av_uid='' sc_version='1.0'][/av_testimonial_single]
[av_testimonial_single name='Name' subtitle='' check='is_empty' element_template='' src='' src__locked='' src_dynamic='' src_dynamic__locked='' name__locked='' subtitle__locked='' content__locked='' link='https://' link__locked='' linktext='' linktext__locked='' one_element_template=''  av_uid='' sc_version='1.0'][/av_testimonial_single]
[/av_testimonials]

Best regards,
Ismael

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