Hi,

UPDATE: We set the font size of the “Ready to take the Plunge?” heading to 40px.

Best regards,
Ismael

Hi,

Thank you for the update.

Did you check the value of the Styling > Font Sizes settings? Please edit the Special Heading elements in the page, then adjust the value of the Styling > Font Sizes settings.

Best regards,
Ismael

Hey jnightingale,

Thank you for the inquiry.

The font sizes of the Special Heading elements were configured manually. You have to adjust them by editing the elements and adjusting the values in the Styling > Font Sizes panel. Let us know the result.

Best regards,
Ismael

Hey Martin,

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

.av-masonry-entry .av-masonry-entry-title {
  font-size: 24px;
}

Best regards,
Rikard

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

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

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

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

Hey spokerstradingco,

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

Best regards,
Ismael

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

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

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

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

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

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