Hi Marcus,

Thanks for contacting us!

I think in your case using “Phone Number Or Small Info Text” field to add your text and number would be better.

1- Please add following code to Quick CSS field in Enfold theme options > General Styling tab

.phone-info {
  font-size: 14px;
}

2- Please insert your phone number as following

<a href="tel:0412121212">tel:0412121212</a>

Regards,
Yigit

Hey GWS,

Thank you for the inquiry.

Did you add the following code in the functions.php file?

//-------------------------------
// function - Text Logos
//-------------------------------
add_filter('avf_logo_final_output', 'avf_text_logo_final_output');

function avf_text_logo_final_output($logo) {
  $link     = apply_filters('avf_logo_link', home_url('/'));
  $logotext = "LOGO TEXT";
  $subtext  = "A CUSTOM SUBTEXT";
  $subtext  = "<span class='subtext'>$subtext</span>";
  $logo     = "<span class='logo'><h1><a href='".$link."'>".$logotext.$subtext."</a></h1></span>";

  return $logo;
}

You can add this code in the Quick CSS field to adjust the style of the text logo and subtext.

/* Text logo styling */

#top .logo,
#top .logo a {  
  overflow: visible;
}

#top .logo {  
  background: gold;
    display: flex;
    align-items: center;
    padding: 15px;
}
#top .logo .subtext {
    font-size: 18px;
    color: #be0027;    
    position: absolute;
    width: 100%;
    left: 0;
    top: 25px;
}

/* Hide subtext on scroll */
#header.header-scrolled-full .subtext {
  display: none;
}

Best regards,
Ismael

Hey Alfredo,

Thank you for the inquiry.

You can replace the code above with the following css.

.special_amp {
    font-size: 1em;
    font-family: 'Heebo', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding modification.

Best regards,
Ismael

Hey woogie07,
Thanks for the link to your site, typically if you wanted a call button you would add the tel: link to your menu item and use the button option, but I see that you have a phone number in your topbar and the topbar shows on mobile so would you like a call button there?
If so you could use the shortcode wand to create your button and use it to create a call button shortcode that you can add anywhere to display it, such as the Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text field.
So to do this first open a new post and in the block editor select the classic block and in the toolbar select the shortcode wand ▸ Button:

then the standard Advanced Layout Builder button element will open for you to design the button, after you build your button and save the button shortcode will show for you to copy

Then add your button shortcode to this function:

function call_button_shortcode( ){
	echo do_shortcode(" button-shortcode-here ");	
}
add_shortcode( 'call_button', 'call_button_shortcode' );

for my example I used this code:

function call_button_shortcode( ){
	echo do_shortcode("[av_button label='Call Us' icon_select='yes' icon='ue854' font='entypo-fontello' link='manually,tel://555-555-5555' link_target='_blank' size='medium' position='right' 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='' av_uid='' sc_version='1.0' admin_preview_bg='']");	
}
add_shortcode( 'call_button', 'call_button_shortcode' );

Then add this to your child theme functions.php, and add the call button shortcode [call_button] to your Phone Number Or Small Info Text field:

This is the result for desktop and mobile:

You can also add this call button shortcode in other places like widgets and your footer.

Best regards,
Mike

Hi,
Thanks for your patience and the link to your site please try this css:

@media only screen and (max-width: 450px) { 
#top #wrap_all .all_colors h2.av-milestone-date {
    font-size: 35px;
    line-height: 1em;
}
#top h2.av-milestone-date strong {
    font-size: 20px;
}
}

After applying the css, please clear your browser cache and check.
this is the expected results:

Best regards,
Mike

Hi,

You are welcome, Philipp!

Please add following code to Quick CSS as well and adjust it as needed

#top .phone-info {
  font-size: 14px;
}
#top .sub_menu {
  font-size: 14px;
}

Best regards,
Yigit

Hey Jaro,

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

nav.sub_menu_socket ul a {
  font-size: 16px;
}

Best regards,
Rikard

Hi,
Thank you for your patience and the login I changed the h3.team-member-name css to include float:left; and added css to remove the float when it is a popup:

h3.team-member-name {
	font-size: 18px;
  float: left;
}
.mfp-content h3.team-member-name {
  float: none;
}

so now before popup it is like this:

and when poped up it is like this:

please clear your browser cache and check.

Best regards,
Mike

Hi,

1- It would be easier to switch to one of the included icons. If existing fonts do not fit, you can refer to this post – https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons- and add your own icons :)

2- Please add following code to Quick CSS field in Enfold theme options > General Styling tab

#avia3-menu a::after {
  content: "\E881";
  color: #EB5847;
  font-size: 18px;
  font-family: 'entypo-fontello';
  position: absolute;
  margin-left: 5px;
}

3- Your site language seems to be set to English. Please go to Settings > General and switch the language to Dutch :)

Best regards,
Yigit

Hi,

Sorry for the delay. To move the title above the image, you can use this script in the functions.php file.

function av_custom_inline_script() {
	wp_add_inline_script( 'jquery', 
		"
		(function($) {
			$('.av-masonry-entry').each(function() {
				var title = $(this).find('.av-masonry-entry-title');
				var image = $(this).find('.av-masonry-image-container');
				title.insertBefore(image);
			});
		})(jQuery);
		"
	);
     }
add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );

You may need to add a few css modifications to adjust the style of the title.

.avia_desktop .av-masonry-entry:hover .av-masonry-entry-title.entry-title, .avia_desktop .av-masonry-entry .av-masonry-entry-title.entry-title {
    opacity: 1;
    z-index: 1000;
    font-size: 30px;
    color: red;
    position: relative;
}

Best regards,
Ismael

Hi,
Thanks for the link to your site, it seems that this only occurs on screens larger than 1500px, probably due to the change in the font size for larger screens, we not have a way to disable it when it is out of view, but we can increace the height of the column that it is in to stop the movement.
Try this css in your Quick CSS:

@media only screen and (min-width: 1500px) { 
#top.home .flex_column.avia-builder-el-2  {
	min-height: 350px;
	height: 350px;
}
}

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

Best regards,
Mike

Hey Alfredo,

Thanks for contacting us!

Please add following code to functions.php file of your child theme – https://kriesi.at/documentation/enfold/child-theme/

add_action('ava_before_footer','footer_content_new');
function footer_content_new(){
echo "<div class='my-custom-title'>Contact Ons</div>";
}

Then you can add following code to bottom of Quick CSS field to change the styling

.my-custom-title { color: red; font-size: 32px; }

Regards,
Yigit

• This reply was modified 3 years, 2 months ago by Yigit.

Hey Alfredo,

I copied HTML of arrow icon and pasted inside your Special Heading elements and give them a custom CSS class “red-arrow-title” in Advanced > Developer Settings and then added following code to bottom of Quick CSS field

/* Change read more arrows */
.more-link-arrow::after {
  content: "\E881";
  color: red;
  font-size: 30px;
}

.red-arrow-title .av-icon-char {
  color: red;
  font-size: 20px;
  position: absolute;
  margin-left: 5px;
}

Please review your website :)

Best regards,
Yigit

Hi,

There was a CSS error in your Quick CSS field. I fixed it and following code was overriding it

/*Enfold footer menu*/
span.avia-menu-text{
color: white;
font-weight: bold;
font-size: 13px;
}

so I changed it to following

/*Enfold footer menu*/
#avia3-menu span.avia-menu-text{
color: white;
font-weight: bold;
font-size: 13px;
}

Please review your website :)

Best regards,
Yigit

Hi,

Thanks for contacting us!

Please edit your Icon List element and go to Styling > Font Sizes > Title Font Sizes and set them to 24px :)

Best regards,
Yigit

Hey F,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

@media only screen and (min-width: 2600px) { 
#top #header .av-main-nav > li > a {
  font-size: 24px;
}
}

Regards,
Yigit

Hey HolgerRaddatz,
Thanks for the link to your site, you can use this css to brake the words so they stay in the cells, please note that not all browsers will show the hyphens, Chrome on Windows doesn’t but the words are still broken.

#top .avia-table.avia-pricing-table-container li {
	 -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

Another option is to reduce the font size for the tablet screen, but your long words still need to be broken, but this might look better:

@media only screen and (min-width: 768px) and (max-width: 1415px) { 
#top .avia-table.avia-pricing-table-container li {
 font-size: 12px;
 -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

So try different font sizes to find a balance that you like.

Best regards,
Mike