Page 13 – Support | Kriesi.at – Premium WordPress Themes

Hey Andreotti,

Thank you for the inquiry.

You can adjust the font size in Enfold > General Styling > Typography, and for additional configurations, you can edit the Main Menu elements in Enfold > Advanced Styling. Let us know if you need further assistance.

Best regards,
Ismael

January 1, 2025 at 6:55 pm #1474458

Topic: Header Menu

in forum Enfold

Andreotti

Participant

Hello I wish you the best wishes for the new year..

Can you please help me:
how can I change the font size in the main menu

thanks

Andrea K.

December 28, 2024 at 9:47 am #1474327

In reply to: Centre menu below

give this a try:

@media only screen and (min-width: 990px) { 
  .html_header_top.html_logo_center #top #header_main_alternate .main_menu {
    width: 100%
  }

  .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu {
    display: flex !important;
    flex-flow: row nowrap;
    justify-content: space-evenly;
  }

  .html_header_top.html_logo_center #header_main_alternate .main_menu  .av-main-nav > li > a {
    padding: 0 !important;
    font-size: 19px !important;
  }
}

i guess you will set the header widget to display none on small screens

@media only screen and (max-width: 989px) { 
  #header .widget {
    display: none;
  }
}

by the way: is it intentional that the container width is set to 1130px ?

December 26, 2024 at 6:21 am #1474258

In reply to: Mobile screen result

You have to find these rules:

@media only screen and (min-width:768px) and (max-width:989px) {
  body,
  body .avia-tooltip {
    font-size:80px
  }
  h1 {
    font-size:60px
  }
  h2 {
    font-size:50px
  }
  h3 {
    font-size:42px
  }
}
@media only screen and (min-width:480px) and (max-width:767px) {
  body,
  body .avia-tooltip {
    font-size:66px
  }
  h1 {
    font-size:46px
  }
  h2 {
    font-size:37px
  }
  h3 {
    font-size:29px
  }
}
@media only screen and (max-width:479px) {
  body,
  body .avia-tooltip {
    font-size:53px
  }
  h1 {
    font-size:38px
  }
  h2 {
    font-size:28px
  }
  h3 {
    font-size:20px
  }
}

This is a very unusual scaling.
First of all, the value for the base (body) is set very high.
Even if you take the aspect of wai aria into account, a body font-size of 53 ( below 479px) is gigantic. For desktop screen widths, this is 13px.
Here I would rather go higher, e.g. to 16px.

Because you have set a merging of the styles – i can not say where the rules comes from ( maybe it is a merging of W3total Cache ).
have a look if you have set on General Styling – Typography these values or in your quick css.

December 24, 2024 at 8:57 pm #1474239

In reply to: different fonts with differetnt colors

Woutski

Hi,

I added to the quick css
body {
font-size: 16px;
letter-spacing: .04rem;
font-family: univers, ‘univers’, ‘Univers LT Std’;
font-weight: 400;
font-style: normal;
}
And added a link in the header
<link rel=”preload” href=”UniversLTStd-LightCn.woff2″ as=”font” type=”font/woff2″ crossorigin>

This works
Thank you for thinking with me

Best regards, Wouter

December 23, 2024 at 5:37 am #1474161

In reply to: Edit style of text on masonry

Hi,

Thank you for the update.

Yes, you can adjust the style as you wish and include the font-family property if you want to change the font:

.grid-entry-title {
    font-size: 13px;
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-family: 'Roboto';
}

If you want to adjust the font globally, go to Enfold > General Styling > Fonts tab. For more info, please refer to this documentation: https://kriesi.at/documentation/enfold/typography/#overview

Best regards,
Ismael

December 22, 2024 at 8:10 pm #1474149

In reply to: Edit style of text on masonry

Mike

Hi,
For the /artikler/ page titles to look like the /blog/ page titles,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.grid-sort-container .grid-entry-title {
	font-weight: 600;
	font-size: 15px;
}

or for the other way:

.av-masonry-entry-title.entry-title {
	font-weight: 500;
	font-size: 13px;
}

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

Best regards,
Mike

December 20, 2024 at 5:54 am #1474040

In reply to: Change text size of links and font family in mega menu

Hi,

Thank you for the update.

If you need to specifically target the elements in the mega menu, you can start with this css code — take note of the comments:

/* description */
#top #header .avia_mega_div > .sub-menu > li > ul li {
    font-size: 100px;
}

/* menu items */
#top #header .avia_mega_div .sub-menu li a .avia-menu-text {
    font-size: 50px;
    padding: 50px 0;
}

/* mega menu title */
#top #header .mega_menu_title {
    margin-bottom: 8px;
    font-size: 90px;
    line-height: 1.1em;
    font-weight: 600;
    display: block;
}

You may need to remove this css code:

.sub-menu li a .avia-menu-text {
    font-size: 20px !important;
    padding: 20px 0 !important;
}

And make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings and purge the cache after the modification.

Best regards,
Ismael

December 19, 2024 at 8:33 pm #1474025

Topic: Increase font size of burger menu

in forum Enfold

December 19, 2024 at 7:45 pm #1474023

In reply to: Change text size of links and font family in mega menu

spokerstradingco

Hi, I checked the resource you recommend but there is no way to change the just the font family or the link size for the links specifically in my mega menu. I do see a way to change all the element size using the advanced settings but I need the link element specifically in the mega menu. I wanted to have different fonts and sizes for the links and headers in the mega menu. The advanced styling setting make everything the same font. Please let me know if this is doable.

This thread highlights what I’m trying to do but the code did not work. https://kriesi.at/support/topic/enfold-mega-menu-font-sizes-and-spaces/

Basically I want the links a different font family than the header and smaller. I thought this code would work but it doesn’t

#top #header .avia_mega_div > .sub-menu > li > ul > li a { font-size: 16px; }

December 19, 2024 at 6:38 am #1473989

In reply to: Mega Menu Font size

Hey spokerstradingco,

Please continue here: https://kriesi.at/support/topic/change-text-size-of-links-and-font-family-in-mega-menu/

Best regards,
Ismael

December 18, 2024 at 6:20 pm #1473947

Topic: Change text size of links and font family in mega menu

in forum Enfold

spokerstradingco

Participant

How do I change the size and the font family for the link in my mega menu?

December 18, 2024 at 6:18 pm #1473944

Topic: Mega Menu Font size

in forum Enfold

spokerstradingco

Participant

How do I change the font size and font family for the description text box in my mega menu?

December 18, 2024 at 7:17 am #1473874

In reply to: changing font sizing

Hey John,

Thank you for the inquiry.

You may need to adjust the font sizes in the Enfold > General Styling > Typography tab. Let us know if you need further assistance.

Best regards,
Ismael

December 18, 2024 at 6:59 am #1473870

In reply to: Use the breadcrumb area on SHOP page as a section saying Free Shipping

Hey Dzimnikov,

Thank you for the inquiry.

Try to add this script in the functions.php file to create another container below the product description or shop banner :

function ava_custom_add_shipping_text_script() { 
    if (is_shop()) { 
    ?>
        <script>
            (function ($) {
                $(document).ready(function () {
                    var newContainer = $('<div class="av-custom-shipping-container"><p>Free Shipping on All Orders!</p></div>');
                    $('#av_product_description .container').after(newContainer);
                });
            }(jQuery));
        </script>
    <?php 
    }
}
add_action('wp_footer', 'ava_custom_add_shipping_text_script', 99);

Then add this css code to adjust the style of the new container:

#top .av-custom-shipping-container {
    background: red;
    padding: 20px;
}

#top .av-custom-shipping-container p {
    color: #ffffff;
    font-size: 40px;
}

Best regards,
Ismael

December 18, 2024 at 5:43 am #1473858

Topic: changing font sizing

in forum Enfold

aussiedropbear

Participant

Hello,

Not sure if I’m losing my mind here but to change the font sizing of headings and body text – wasn’t this in General Styling/Fonts where you can choose the font type and then the font size from within the same tab section? I only have the font type – where did the sizing go?

Thanks
John

December 16, 2024 at 5:05 am #1473718

In reply to: Changing buttons colors to gradient

Hey yifatcohen,

Thank you for the inquiry.

We adjusted the css modification a bit — please try it again:

#top .avia-button-wrap .avia-button, #top .button {
    background: #990033;
    background-image: -webkit-linear-gradient(top,#990033,#ff924d);
    background-image: -moz-linear-gradient(top,#990033,#ff924d);
    background-image: -ms-linear-gradient(top,#990033,#ff924d);
    background-image: -o-linear-gradient(top,#990033,#ff924d);
    background-image: linear-gradient(to bottom,#990033,#ff924d);
    -webkit-border-radius: 26px;
    -moz-border-radius: 26;
    border-radius: 26px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    bottom: 0px;
    border-color: transparent !important;
    border: 0;
}

Best regards,
Ismael

December 15, 2024 at 10:45 pm #1473715

Topic: Changing buttons colors to gradient

in forum Enfold

yifatcohen

Participant

I added this CSS code to change all buttons to gradients:

.avia-button, .button {
background: #990033;
background-image: -webkit-linear-gradient(top, #990033, #ff924d);
background-image: -moz-linear-gradient(top, #990033, #ff924d);
background-image: -ms-linear-gradient(top, #990033, #ff924d);
background-image: -o-linear-gradient(top, #990033, #ff924d);
background-image: linear-gradient(to bottom, #990033, #ff924d); !important;
-webkit-border-radius: 26;
-moz-border-radius: 26;
border-radius: 26px; !important;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
bottom: 0px;
}

button

You’ll notice 2 things:
1. the main blue color is still showing up there as a shadow
2. the border-radius seems to be ignored completely.

How do I fix that?

Ah, you can see it live here – https://gregward.com/

December 15, 2024 at 9:38 pm #1473713

In reply to: Font size for lists and tables

reqonsult

Hello, thank you. The font in the left column of the table is fine, we inserted the bold element on purpose. What I consider problematic is the right column, please see the attached screenshot 1. Here you can see that the text “A” (paragraph) is larger and narrower than the text “B”. This is despite the fact that the default font size has been defined as 15px (the same as for paragraphs). Please see the attached screenshot 2. How can we solve this?

December 12, 2024 at 5:48 pm #1473513

In reply to: Scroll down arrow in color section not responding to customisations

Mike

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

#main .scroll-down-link:before {
	color: #fff;
	font-size: 80px;
}

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

Best regards,
Mike

December 12, 2024 at 3:49 pm #1473503

Topic: Main menu color and font size

in forum Enfold

fp47

Participant

Hi,

I would like to change Main menu color and font size.
I tired many things but…

how to increase the font size and change colors

Thnak you so much

December 11, 2024 at 8:30 am #1473394

In reply to: add custom icon

Hi,

How can I place the icon in the middle?

Make sure the background-position is set to center center, and adjust the value of the background-size property if you need to reduce the size of the images.

Example:

div[data-av_icon="\e804"] {
    content: " ";
    background-image: url(/wp-content/uploads/2024/12/Goering_Icon5_eKey_farbig_RGB.png) !important;
    background-size: 50%;
    background-repeat: no-repeat;
    font-size: 0 !important;
    background-position: center center;
}

Best regards,
Ismael

December 10, 2024 at 1:34 pm #1473347

In reply to: Social Icons in Footer (using the page set as the footer)

Hi,

Thank you for the update.

1. Remove the text Share This Entry
2. Remove the Hover Tabs “link to facebook” etc
3. Make the icons smaller – one one line?

Please add the following css code to adjust the social icons based on your requests above:

#top #footer-page .av-social-sharing-box:not(.av-social-sharing-box-default) .av-share-box ul li .avia-related-tooltip.avia-tt {
    display: none !important;
}

#top #footer-page .av-social-sharing-box:not(.av-social-sharing-box-default) .av-share-box ul {
    display: flex;
}

#top #footer-page .av-social-sharing-box.av-social-sharing-box-same-width .av-share-box ul li a {
    width: 30px;
    height: 30px;
}

#top #footer-page .av-share-box ul li a {
    display: block;
    padding: 2px 0;
    text-decoration: none;
    color: inherit;
    font-size: 11px;
    transition: all 0.2s ease-in-out;
}

4. Change the background color of the icons and icon color?

Then use this css code to adjust the background and color of the social icons — note the selector “.av-social-link-facebook” when modifying other social icons.

#top #footer-page .av-social-sharing-box.av-social-sharing-box-color-bg .av-social-link-facebook a {
    color: #fff;
    background-color: #37589b;
}

Best regards,
Ismael

December 9, 2024 at 5:59 pm #1473269

In reply to: add custom icon

Mike

Hi,
For the css, each icon has a different code number, for your shield with the check mark it is \e802

div[data-av_icon="\e802"] {
	content: " ";
	background-image: url(/wp-content/uploads/2024/12/Goering_Icon1_eCheck_farbig_RGB.png) !important;
	background-size: contain;
	background-repeat: no-repeat;
       font-size: 0 !important
}

I adjusted your css and now it works.

Please review the thread on how to find the icon code:

Best regards,
Mike

December 9, 2024 at 2:37 pm #1473241

In reply to: add custom icon

michael_goering

This reply has been marked as private.

December 9, 2024 at 12:35 pm #1473233

In reply to: How to get same styling for normal button and blog-Button (read more button)

maybe this is then the way it works:

ok – try now – change to your needs and transition timings:

/*** ===============================***/
/* Basisstil für alle Weiter Lesen "buttons" */
.more-link {
  display: inline-flex !important; /* Flexbox für zentrierten Inhalt */
  flex-flow: row nowrap;
  justify-content: center; /* Horizontale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  font-weight: 800; /* Fettschrift */
  text-align: center !important;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 2px solid #ff3366 !important; /* Rahmenfarbe */
  padding: 0.95rem 2.5rem 0.95rem 2rem !important; /* Innenabstand */
  font-size: 1rem; /* Schriftgröße */
  line-height: 1rem; /* Zeilenhöhe */
  border-radius: 100px !important; /* Abgerundete Ecken */
  color: #ffffff !important; /* Schriftfarbe Weiß */
  font-family: 'Montserrat', sans-serif; /* Schriftart */
  letter-spacing: 0.25px; /* Buchstabenabstand */
  text-transform: uppercase; /* Großbuchstaben */
  background-color: #ff3366; /* Hintergrundfarbe */
  position: relative; /* Für die Animation */
  overflow: hidden; /* Inhalt begrenzen */
  transition: all 300ms ease-in-out; /* Sanfter Übergang */
  width: auto !important;
}

/* Stil für den Text und die Pfeile */
.more-link span {
  display:  inline-flex; /* Flexbox für Text und Pfeile */
  flex: 0 1 auto;
  transition: all 700ms ease-in-out; /* Sanfte Bewegung */
  padding: 0px;
}

.more-link:hover span {
  padding: 0 3px;
}

/* Stil für die Pfeile */
.more-link .more-link-arrow::after {
  content: ">>"; /* Pfeile */
  font-family : inherit;
  opacity: 0; /* Unsichtbar im Standardzustand */
  visibility: hidden;
  position: absolute;
  top: 14px;
  right: 0.5ch;
  color: #ffffff; /* Pfeile in Weiß */
  font-size: inherit;
  font-weight: 800;
  line-height: inherit;
  transition: all 700ms ease-in-out;
}

/* Hover-Effekt für die Pfeile */
.more-link:hover .more-link-arrow::after {
  visibility: visible;
  opacity: 1; /* Pfeile werden sichtbar */
 
}

.more-link:hover .read-more-text {
  transform: translateX(-1ch); /* Text verschiebt sich leicht nach links */
}

December 7, 2024 at 4:38 pm #1473160

Topic: How to get same styling for normal button and blog-Button (read more button)

in forum Enfold

Jak73

Participant

Hi,

i added a animated style to a button, which works well:

/* Basisstil für alle Buttons */
.avia-button, .avia-button.avia-size-small, .avia-button.avia-size-large {
    display: inline-flex; /* Flexbox für zentrierten Inhalt */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    font-weight: 800; /* Fettschrift */
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 2px solid #ff3366; /* Rahmenfarbe */
    padding: 0.95rem 2.5rem; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    line-height: 1; /* Zeilenhöhe */
    border-radius: 100px; /* Abgerundete Ecken */
    color: #ffffff !important; /* Schriftfarbe Weiß */
    font-family: 'Montserrat', sans-serif; /* Schriftart */
    letter-spacing: 0.25px; /* Buchstabenabstand */
    text-transform: uppercase; /* Großbuchstaben */
    background-color: #ff3366; /* Hintergrundfarbe */
    position: relative; /* Für die Animation */
    overflow: hidden; /* Inhalt begrenzen */
    transition: all 300ms ease-in-out; /* Sanfter Übergang */
}

/* Stil für den Text und die Pfeile */
.avia-button span {
    display: inline-flex; /* Flexbox für Text und Pfeile */
    align-items: center; /* Vertikale Zentrierung */
    transition: transform 300ms ease-in-out; /* Sanfte Bewegung */
}

/* Stil für die Pfeile */
.avia-button span::after {
    content: ">>"; /* Pfeile */
    opacity: 0; /* Unsichtbar im Standardzustand */
    position: absolute;
    color: #ffffff; /* Pfeile in Weiß */
    font-size: 1rem;
    font-weight: 800;
    left: 100%; /* Start direkt rechts neben dem Text */
    margin-left: 1ch; /* Zwei Leerzeichen Abstand */
    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}

/* Hover-Effekt für den Text */
.avia-button:hover span {
    transform: translateX(-1ch); /* Text verschiebt sich leicht nach links */
}

/* Hover-Effekt für die Pfeile */
.avia-button:hover span::after {
    opacity: 1; /* Pfeile werden sichtbar */
    transform: translateX(0); /* Pfeile bleiben an ihrer Position */
}

Now i’m trying to have the same effect on the read more button from the blog, but it seems not to work properly.
What am i missing here?

kind regards

Jak

December 4, 2024 at 11:20 am #1472889

In reply to: How to display icon in button which is in image slide in fullwidth easy slider