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, 1 month 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

Hey rixi,

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

#menu-menuric li a {
  font-size: 18px; 
  color: red;
}

Best regards,
Rikard

Hi,

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

.sub_menu_socket .avia-menu-text {
  font-size: 16px !important;
}

You can change the copyright text under Enfold->Footer.

Best regards,
Rikard

Hey daineax,

You can add an ID or class to the button in the element options, under Advanced->Developer settings. You can then target your custom button like this:

.your-button class .avia-button {
  color: red; 
  font-size: 24px; 
  background-color: green; 
}

Best regards,
Rikard

Hi,

Thank you for the update.

Decreasing the size of the text should prevent the issue.

span.av-rotator-text-single {
    font-size: 0.6em;
    font-family: "Arial", serif;
}

You can also use the css code above to adjust the font-family of the rotating text.

Best regards,
Ismael

Hey Monika,

Thank you for the inquiry.

Have you tried using a larger or wider column, or decreasing the size of the rotator text? The text wraps to the next line because the line can no longer contain the characters. Decreasing the text size or using a wider column should ensure that the whole sentence can be contained in the same line. You can adjust the position of the rotator element in the Styling > Font Sizes toggle.

To adjust the style of the rotator text, please try this css code.

.av-rotator-text {
    font-family: inherit;
    font-weight: 300;
}

Let us know if there’s anything else we can help you with.

Best regards,
Ismael

Hey diefleischerei,

Thank for the question.

You can try this css code to adjust the style of the comments including the font size.

#top .comment_text {
    clear: both;
    font-size: 1.3em;
    padding: 0 0 15px 0;
    border: none;
}

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

Best regards,
Ismael

Hey cuccarini,

Thank you for the inquiry.

1.) This is possible but you have to display 4 items for each row on desktop view, then use this css code to adjust the width of the items on smaller screens.

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #main .avia-content-slider .slide-entry-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}

Again, you have to display the items in 4 columns instead of 3 in order for this modification to work correctly.

2.) This is possible but it will require modification that is beyond the scope of support. You may need to edit the single.php or the includes > loop-index.php template in order to achieve the same layout shown in your screenshot. For starters, you can use this css code to split the featured image and the content into separate columns.

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #main .avia-content-slider .slide-entry {
    width: 100% !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .responsive #top #wrap_all #main .avia-content-slider .slide-entry .slide-content {
    flex-grow: 1;
    width: 60%;
    flex-shrink: 0;
    margin-left: 4%;
  }

  h3.slide-entry-title.entry-title {
    text-align: left;
    font-size: 20px !important;
  }
}

Best regards,
Ismael

Hi,
Your css to change the font size to 64px had a space between 64 & px, so that it would not work, I removed the space.
64 seems very large to me, please clear your browser cache and check and adjust to suit.

Best regards,
Mike