Hi,
On the page that you linked to I didn’t see your example, so here is a screenshot of the first item:

do you want the large 20,00 € + IVA to be small.
and the small 24,40 € to be large?
both can stay in their places, you just want the font size changed, correct?

Best regards,
Mike

Hey yas28,
Do you mean that the titles don’t fit on a single line like this:

you can adjust the font size for mobile at styling ▸ font size and click the icon for the phone and then set the size you wish

To see a better display of your site for mobile when you are editing, try opening your site in another tab and use the Dev Tools Responsive Design Mode

Best regards,
Mike

Hi,
You can change the font size in the Enfold Theme Options ▸ Advanced Styling for menu items, but the flag is a very small icon, so you can’t make it larger.

Best regards,
Mike

Hey ijnavas,
To add nine social media icons per team member you will need to make the social icons smaller like this:

.team-social a {
    text-decoration: none;
    position: relative;
    border-radius: 30px;
    padding: 0;
    background: #fff;
    margin: 3px;
    display: inline-block;
    height: 17px;
    line-height: 17px;
    width: 15px;
}
.avia-team-member .team-social {
	font-size: 10px;
}

the expected results

Best regards,
Mike

Hi,

Sorry we missed the video. Looks like you have created a copy of the same section for smaller device. Does it work when you temporarily disable or remove the section? If the issue persists, please try to add this css code.

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .responsive.av-no-preview #top #wrap_all .av-small-hide,
  .responsive.av-no-preview #top #wrap_all .av-small-font-size-hidden,
  .responsive.av-no-preview #top #wrap_all .av-small-font-size-title-hidden {
    display: none;
    height: 0;
  }
}

Best regards,
Ismael

Hi,

Thank you for the clarification.

The logo is pushed a bit to the right because of this css code.

.responsive #top .logo .subtext {
    transform: translate(2%,-50%)!important;
    width: 235px!important;
}

Adjusting the transform/translate value should move the logo farther to the left.

.responsive #top .logo .subtext {
    transform: translate(-15%,-50%)!important;
    width: 235px!important;
}

And to adjust the size of the magnifying glass, please add this css code.

.responsive #top #wrap_all .menu-item-search-dropdown>a {
font-size: 42px;
}

Best regards,
Ismael

Hi,

Glad to hear this helped the map issue, I see the your mega menu items are still column titles, have you tried to change them to regular menu items? Doing this will make the fonts size smaller and the width smaller, like this mega menu example:

unless you specifically only want to use column titles?
If so then try this css and adjust the font to suit:

#top #header .mega_menu_title,
#top #header .mega_menu_title a {
    font-size: 12px;
}

To make the meag menu smaller tru this css and adjust to suit:

#header .avia_mega_div.twelve.units {
    width: 602px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Sorry for the confusion. I thought that you wanted the button element to look the same as the slider button, but it’s the other way around. Please use this css code to adjust the style of the slider button.

#top .avia-slideshow-button {
    text-transform: none;
    background: #FAC710 !important;
    padding: 12px 16px 10px;
    font-size: 16px;
    min-width: 90px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: #000;
    margin-top: 20px;
}

#top .avia-slideshow-button:hover {
    border-color: #CA9336;
    color: #fff;
    background: #D28C17 !important;
}

Best regards,
Ismael

Hey gatehealing,

Thank you for the inquiry.

1) Summary: Legible Font Sizes (THREE issues)

1) Font Size 11px – It seems to be referring to the base or default font size for all text elements. This css rule is overridden by the custom font sizes that can be set in the Enfold > General Styling > Typography panel.

2-3) Font Size 11px .pagination span, .pagination a – You can adjust the size of the pagination with this css code.

#top .pagination .current, #top .pagination a, #top .fullsize .template-blog .pagination a {
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 100px;
    margin-right: 5px;
    font-size: 1em;
}

#top .pagination .pagination-meta {
    float: right;
    line-height: 35px;
    font-size: 1em;
}

2) Summary: Tap Target Sizing (FIVE issues)

1) Element Label Search – Looks like you’ve disabled the search bar in the header but if you want to adjust the size of the label, try to use this css code.

#top .av_minimal_header #s {
    font-size: 1.2em;
}

———————————————–
2-5) Element Label span.blog-categories > a – The other 4 refers to the post categories, which can be adjusted using this css code.

.html_elegant-blog #top .post-entry .minor-meta {
    font-size: 1em;
}

Best regards,
Ismael

Hi,

I created the lower button at the green arrow with the button element and some CSS.
Now I want the button at the top of the red arrow to look the same.

Have you tried editing the button styles within the element’s Styling panel? You’ll find options there to customize attributes like color, font size, borders, and more.

Best regards,
Ismael

Hey CharlieTh,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #main #commentform .comment-form-rating label[for=rating]{
	background:green;
	color:red;
	font-size: 25px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Yaphoon,
For your Gaode Map page try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.page-id-53 #av_section_1 .container {
	max-width: 100%;
	padding: 0;
}
.responsive #top.page-id-53 #av_section_1 .container main {
	padding: 0;
}

the expected results:

as for your mega menu, it looks like each of your menu items is a column title which by defalt has a different color and font size than the regular menu items:

so perhaps you could adjust the mega menu items to correct your font size and color.
I don’t know what you mean by “adjust the square size”, if you mean the whole mega menu size, it is created by the number of items in it with js and not easy to change.

Best regards,
Mike

Hi,
If you are using a child theme then yes leave the code in the functions.php, otherwise I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and you will not lose your code when you update as you would if the code is in your parent theme functions.php.
To change it into a button using the magic wand in the Post editors we will need to change the function a little to use do_shortcode
Here is an example that I tested on my yest site and works, you can change the button code to suit your needs:

add_action("ava_after_content", function() {
    if (is_singular('post')) {
        echo do_shortcode("[av_button label='Back to Bolg' icon_select='yes' icon='ue830' font='entypo-fontello' icon_hover='aviaTBicon_hover' link='manually,#' link_target='' size='medium' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']");
    }
}, 10);

Best regards,
Mike

Hi,

Please add the following to the bottom of Functions.php file of your child theme ( https://kriesi.at/documentation/enfold/child-theme/ ) or as a new snippet using the Code Snippets ( https://wordpress.org/plugins/code-snippets/ ) plugin:

add_action('ava_after_main_container', 'new_ava_after_main_container');
function new_ava_after_main_container(){
	if(is_page(8779)){
		echo '<div class="custom-back-button"><span class="av_font_icon av-lm7ig98k-65ba33b015b6384fd3901ea03a4bd5d6 avia_animate_when_visible av-icon-style- avia-icon-pos-left av-no-color avia-icon-animate avia_start_animation avia_start_delayed_animation"><a href="LINK_TO_YOUR_HOMEPAGE" class="av-icon-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a></span></div>';
	}
}

You can use the “is_page” condition to target your Boats page. The “8779” is ID of the page you shared in your initial post. If you want to display the button on another page, you’ll need to update the “8779” in the code.

Then, you’ll need to update the “LINK_TO_YOUR_HOMEPAGE” in the snippet to the link of your homepage.

After that, add the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling

.custom-back-button {
  position: fixed;
  top: 50px;
  left: 20px;
  z-index: 99;
  background-color: #1a1a1a;
  opacity: 0.7;
  padding: 90px 30px 40px 30px;
}

.custom-back-button .av_font_icon {
font-size: 80px;
margin: 0;
}

You’ll need to use jQuery to hide/display the button when scroll down/up.

We cannot help you fine-tune this. If you need further assistance, please consider to hire a freelance developer for the task.

Best regards,
Yigit

Hi,

Thank you for the update.

There is no dedicated option to change the style of the title in the breadcrumb container, so you may have to add a few css modifications. You can start with the following css code.

.title_container .main-title {
    margin: 0;
    font-size: 16px;
    position: relative;
    z-index: 2;
    min-height: 36px;
    line-height: 2.3em;
    top: 0;
    font-weight: 400;
    font-family: Open Sans;
}

To disable the link, we can set the pointer-events property to none.

.title_container .main-title a {
    pointer-events: none;
}

Best regards,
Ismael

Hi,
To change that font-size try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .wp-caption-text {
    font-size: 12px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike