Hi,

Thank you for the inquiry.

The characters or glyphs seem to be displaying correctly when we tested it. The font size is quite small for mobile phones, so the dots for example are not clearly visible but they are rendering properly. Have you tried increasing the font size for smaller screens?

We also noticed that the site is using a font called “Amiri”, which is intended for Arabic text. Is this intentional?

// https://fonts.google.com/specimen/Amiri

Best regards,
Ismael

Hi,

Please try this CSS as well:

#text-5 p {
  font-size: 14px; 
}

Best regards,
Rikard

Hi,

You can adjust the style of the caption or the slider content with this css code.

#top .avia-slideshow .av-slideshow-caption {
    font-size: 22px;
    font-family: Copperplate;
}

Best regards,
Ismael

Hi,
If you have enabled the Image Caption for your ALB image element:

you can use this css to move it to the bottom:

.av-image-caption-overlay {
  bottom: -20px !important;
  font-size: 10px !important;
  height: auto !important;
  left: 50% !important;
  transform: translate(-50%) !important;
  width: 100% !important; 
  text-align: justify !important;
}

Best regards,
Mike

Hey zimbo,

Thank you for the inquiry.

You can add this css code to adjust the breakpoint of the header and make sure that it displays the same on relatively smaller screens as it does on tablet view.

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1150px)
{
	.responsive .main_menu ul:first-child > li > a {
		padding: 0 10px;
	}

	.responsive #top .header_bg {
		opacity: 1;
	}

	.responsive #main .container_wrap:first-child{
		border-top:none;
	}

	.responsive .logo{
		float:left;
	}

	.responsive .logo img{
		margin:0;
	}

	.responsive.html_top_nav_header.html_mobile_menu_tablet #top .social_bookmarks {
		right: 50px;
	}

	.responsive.html_top_nav_header.html_mobile_menu_tablet #top #wrap_all #main{
		padding-top:0;
	}

	.responsive.js_active .avia_combo_widget .top_tab .tab{
		font-size: 10px;
	}

	.responsive.js_active .avia_combo_widget .news-thumb{
		display:none;
	}

	.responsive #top #wrap_all .grid-sort-container .av_one_sixth{
		width:33.3%;
		margin-bottom: 0;
	}

	.responsive body.boxed#top,
	.responsive.html_boxed.html_header_sticky #top #header,
	.responsive.html_boxed.html_header_transparency #top #header{
		max-width: 100%;
	}

	.responsive.html_header_top.html_header_sticky.html_bottom_nav_header.html_mobile_menu_tablet #main{
		padding-top: 88px;
	}

	.responsive.html_header_top.html_header_sticky.html_bottom_nav_header.html_top_nav_header.html_mobile_menu_tablet #main{
		margin-top:0;
	}

	.responsive #top .av-hide-on-tablet{
		display:none !important;
	}

	/*new menu*/
	.responsive.html_mobile_menu_tablet .av-burger-menu-main{
		display: block;
	}

	.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu{
		top:0;
		left:auto;
		right:0;
		display:block;
	}

	.responsive.html_logo_right #top #wrap_all .av_mobile_menu_tablet .main_menu{
		top:0;
		left:0;
		right:auto;
	}

	.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item{
		display:none;
	}

	.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special{
		display:block;
	}

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

	.responsive #top .av_mobile_menu_tablet #header_main_alternate{
		display:none;
	}

	.responsive.html_mobile_menu_tablet #top #wrap_all #header {
		position: relative;
		width:100%;
		float:none;
		height:auto;
		margin:0 !important;
		opacity: 1;
		min-height:0;
	}

	.responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks{
		display:none;
	}

	.responsive.html_mobile_menu_tablet #top .av-logo-container .social_bookmarks{
		display:none
	}

	.responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks{
		display:block;
		position: relative;
		margin-top: -15px;
		right:0;
	}

	.responsive.html_logo_center.html_bottom_nav_header .av_mobile_menu_tablet .avia-menu.av_menu_icon_beside{
		height:100%;
	}

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

	.responsive.html_mobile_menu_tablet #top #main .av-logo-container .main_menu{
		display:block;
	}

	.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main{
		padding-top: 88px;
	}

	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
		padding-top: 0 !important;
		margin: 0;
	}

	.responsive.html_mobile_menu_tablet.html_top_nav_header.html_header_sticky #top #wrap_all #main{
		padding-top:0;
	}

	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu  .av-main-nav > li > a,
	.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
		height:90px;
		line-height:90px;
	}

	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu  .av-main-nav > li > a{
		min-width: 0;
		padding:0 0 0 20px;
		margin:0;
		border-style: none;
		border-width: 0;
	}

	.responsive.html_mobile_menu_tablet #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{
		border-right-style: solid;
		border-right-width: 1px;
		padding-right: 25px;
	}

	.responsive.html_mobile_menu_tablet #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
		background:transparent;
		color: inherit;
	}

	.responsive.html_mobile_menu_tablet.html_top_nav_header .av-logo-container .inner-container{
		overflow: visible;
	}

}

Best regards,
Ismael

Hi,

Thank you for the clarification.

We adjusted the css code a bit.

#top .av-subnav-menu > li.current-menu-item a {
    font-weight: bold;
    font-size: 1em;
    color: #3a4f77;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings. By disabling the file compression settings, you will be able to make the necessary adjustments and updates without any conflicts. Once you have made the required modifications, you can re-enable the file compression settings to optimize the performance of your website.

Best regards,
Ismael

Hi,

Thanks for the clarification. Please try this CSS as well:

.phone-info div {
    color: #fff;
    font-size: 14px;
}

Best regards,
Rikard

Hi,

Thank you for the inquiry.

You can add this css code to adjust the style of the phone number text widget in the header.

.responsive #top #header #header_main .inner-container .widget>div {
    color: #ffffff;
    font-size: 30px;
}

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

Best regards,
Ismael

Hey HulaSlim,
Thanks for your question, as I can tell from the Helper Lite for PageSpeed plugin page it

Speed up your site with attributes decoding=”async” & loading=”lazy” for <img> and <iframe>. Removes problem “Does not use passive listeners to improve scrolling performance”. Help to Up Your Google PageSpeed Insights Score.

so this is mostly to get a better PageSpeed Insights Score, the theme already has a lazy load option so the “async” attribute may help with PageSpeed Insights Score but not too much with overall load time, I don’t think that it would conflict with LiteSpeed, but I would disable it until after setting up LiteSpeed and getting a good load time.
I would recommend setting up LiteSpeed first and don’t add any other caching right away, as there may be a issue with supercache, since LiteSpeed works on your server it should work better, at least try it first.
The TinyPNG image compression plugin will work well with LiteSpeed and should help with image sizes.
You can also enable compression in your .htaccess file if you add this code to it:

<IfModule mod_deflate.c>
AddType x-font/woff .woff
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

Best regards,
Mike

Hey Dzimnikov,
Thank you for the link to your site, it looks like the testimonials are in a color section that is light green now, have you tried adding the background image to the color section, or do you want the background image limited to the testimonials only with the light green also showing?
To make the arrows smaller on mobile devices try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 500px) { 
#top #testimonialtemp .av-slideshow-ui.av-loop-endless .avia-slideshow-arrows > a, #top #testimonialtemp .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top #testimonialtemp .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top #testimonialtemp .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
	    width: 30px;
	    height: 30px;
}
#top #testimonialtemp .av-control-minimal .avia-slideshow-arrows a:before {
    line-height: 30px;
}
#top #testimonialtemp .av-large-testimonial-slider .avia-slideshow-arrows a {
    font-size: 20px;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey stephaniebLOS,
Thank you for the link to your site, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .social_bookmarks li a {
width: 40px!important; 
line-height: 40px!important; 
min-height: 40px!important; 
font-size: 20px!important; 
}

#top #wrap_all .social_bookmarks li {
height: 40px!important; 
width: 40px!important; 
}

#top #wrap_all .social_bookmarks {
  height: 60px!important;
}

feel free to adjust to suit and clear your browser cache and check.

Best regards,
Mike

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

#socket span {
	font-size: 16px;
}
#top a:hover {
	text-decoration: underline;
}

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

Best regards,
Mike

Hi,
To make them larger and add a color on hover try this css:

.horizontalicons .iconlist_icon {
width: 48px!important; 
height: 48px!important; 
line-height: 48px!important; 
min-height: 48px!important; 
font-size: 15px;
}

#top .avia-icon-list-container.horizontalicons li:first-child .iconlist_icon:hover {
	color:#fff; background-color:#37589b; 
}
#top .avia-icon-list-container.horizontalicons li:nth-child(2) .iconlist_icon:hover {
	color:#fff; background-color:#a67658; 
}
#top .avia-icon-list-container.horizontalicons li:nth-child(3) .iconlist_icon:hover {
	color:#fff; background-color:#419cca; 
}
#top .avia-icon-list-container.horizontalicons li:nth-child(4) .iconlist_icon:hover {
	color:#fff; background-color:#9fae37; 
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
To adjust for these changes, please remove all of the precious code and use this instead:

#top .avia-cookie-consent.avia-cookiemessage-bottom {
	bottom: unset;
	left: unset;
	margin: 0;
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#top .avia-cookie-consent.avia-cookiemessage-bottom .container {
	transform: translate(0,30%);
}
#top .avia-cookie-consent .avia-cookie-consent-button {
	display: block;
    width: 40%;
    margin: 10px auto;
}
#top .avia-cookie-consent p {
	 display: block;
	 padding-bottom: 20px;
	 font-size: 18px;
}
#top .avia-button.avia-cookie-consent-button {
	 border-radius: 50px;
}
@media only screen and (max-width: 767px) { 
	#top .avia-cookie-consent.avia-cookiemessage-bottom {
	width: 90%;
	height: 80%;
	}
	#top .avia-cookie-consent .avia-cookie-consent-button {
    width: 90%;
	}
}
@media only screen and (min-width: 768px) { 
	#top .avia-cookie-consent.avia-cookiemessage-bottom {
	width: 50%;
	height: 50%;
	}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
When I check your page I see Yigit’s solution above loading:

Please remove this css and disable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files then add this css to your WordPress ▸ Customize ▸ Additional CSS or Enfold Theme Options ▸ General Styling ▸ Quick CSS field and Then clear your browser cache and any cache plugin, and check.

#top .special_amp {
font-family: inherit;
font-style: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit!important;
}

This is the results I see when I test on your page:

Best regards,
Mike

Hi,
Try this css instead:

#top .special_amp {
font-family: inherit;
font-style: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit!important;
}

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

Best regards,
Mike

Hey,

Please use the code as the following:

#top .special_amp {
    font-size: 1em;
    line-height: 1;
    font-style: normal;
    font-family: inherit;
    font-weight: 300;
}

After that, please go to Enfold theme options > Performance and disable CSS file merging, save theme options, clear cache, and enable CSS file merging once again.

If that doesn’t work, please create temporary admin logins and share them with us in the private content field.

Regards,
Yigit

Hi,

No worries. The problem was located in the following CSS media query in the Quick CSS field, where a closing curly brace was missing.

@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: 20px;
  }

  #footer a {
    color: #ceb0ff !important;
  }

  /* Submenu links */

  #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul .sub-menu a {
    color: #ffffff;
  }

  #top #header_main #av-burger-menu-ul {
    vertical-align: top;
    padding: 100px 0px !important;
  }
}

Best regards,
Ismael

Hey zemag33,

Thank you for the inquiry.

The category dropdown is not inherently part of the theme, so making changes to its style will require some CSS modifications. Please add the following code in the Quick CSS field.

#top .select2-results {
    color: #111111;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #fbc307;
    color: #ffffff;
}

For the product title and other related elements, please use this.

.products .product h2, .products .product h3, .products .product h4, .products .product h5, .products .product h6, h2.woocommerce-loop-product__title {
    padding-top: 5px;
    font-size: 2em;
    line-height: 1.3em;
    font-weight: normal;
    margin: 0;
}

#top .price, #top .price span, #top del, #top ins {
    display: inline;
    text-decoration: none;
    font-size: 1em;
    line-height: 24px;
    font-weight: 600;
}

Best regards,
Ismael

Hi,
Thank you for your patience, as I understand your question though Google Translate, your H2 headings on the homepage should be like “Als zertifizierte Humanenergetikerin biete ich:” but this font size is very small at 0.7em:

via some custom css, the heading you want changed are set to 54px in the element options:

and look reasonable on the frontend

Do you really want the fonts tiny?
I recommend removing the custom css that makes it tiny in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .av-inherit-size .av-special-heading-tag {
    font-size: 0.7em;
    font-weight:300 !important;
}

and use the element option to set the size you wish:

Best regards,
Mike