Hi,

Thanks for the clarification. This CSS in your child theme seems to be overriding the element settings:

.avia-data-table.avia_pricing_minimal td, p {
    font-style: normal;
	font-size: 15px;
}

Please try to remove the paragraph part:

.avia-data-table.avia_pricing_minimal td {
    font-style: normal;
	font-size: 15px;
}

Best regards,
Rikard

Hi,
Glad to hear this is helped, to add the icon before the “language” text I added this css to the WordPress ▸ Customize ▸ Additional CSS field:

#av-burger-menu-ul>.wpml-ls-menu-item>a>.avia-menu-text>.wpml-ls-native:before {
  content: "\e821";
  font-family: "entypo-fontello";
  font-size: 18pt;
  display: inline-block;
  margin-right: 0.3em;
}

please clear your browser cache and check.

Best regards,
Mike

Hey mavlab,

Thank you for the inquiry.

1.) You can use this css code to adjust the font size of the category sort.

#js_sort_items .sort_by_cat a {
    font-size: 16px;
}

2.) To remove the portfolio grid image overlay, add this css code.

.grid-entry .image-overlay {
    display: none !important;
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

You can use this css code to hide the catalogue price and replace it with a button.

.av-catalogue-price.av-cart-update-price * {
    display: none;
}

.av-catalogue-price.av-cart-update-price:before {
    content: "View Training";
    color: #000000;
    background: #ebebeb;
    padding: 10px 13px !important;
    top: 10px;
    position: relative;
    border-radius: 3px;
    font-size: 13px;
}

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

Best regards,
Ismael

Hi,
To change the mobile search icon size try this css:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .menu-item-search-dropdown > a {
    font-size: 12px !important;
}
}

and adjust to suit.
To stop the search form from submitting with the enter key, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function($) {
$('#menu-item-search').click(function(){
	setTimeout(function(){
 $("form").attr('onSubmit', 'return false');
	},500);
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

As for the search field on the iPhone view zooms in, this is the iPhone itself and we can not change.

Best regards,
Mike

Hi Marina,

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

#socket {
    font-size: 12px;
}

Best regards,
Rikard

Hey Claudia,

Thanks for the login details. You can set different font sizes for different screen sizes for most elements under Enfold->General Styling->Typography, could you try changing the default values to your liking there please?

Best regards,
Rikard

Hey Marina,

Thank you for the inquiry.

The global font style for the h1 element in the Advanced Styling panel is overriding the custom style for the text block. You can use the Special Heading element instead, but make sure to select a different Heading Style to get access to the Font Sizing settings.

This is the css code that overrides the custom text block font size settings.

#top #wrap_all .all_colors h1 {
    font-size: 26px;
    font-family: 'ubuntu', Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-transform: none;
}

Best regards,
Ismael

Hey koomo,

Thank you for the inquiry.

The quantity buttons in the “people selector” form are different from the button in the product page demo. Please note that the plugin has its own style for its own elements which might be quite different compare to the theme, so expect to add a few css adjustments and change a few templates when building a site using those plugins.

Looks like the plugin is using an svg image for the quantity icons in the “people selector” form, but we can still try to adjust it with css.

.yith-wcbk-people-selector__field__plus-wrap, .yith-wcbk-people-selector__field__minus-wrap {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
color: #008489;
font-size: 16px;
padding: 0;
vertical-align: middle;
line-height: 41px;
border: none;
width: 43px;
height: 43px;
cursor: pointer;
margin: 0;
display: inline;
border: 0;
border-radius: 0;
-webkit-appearance: none;
background-color: #F8F8F8;
border: 1px solid #E1E1E1;
color: #666;
background-image: url(../images/layout/bg-button.png);
background-repeat: repeat-x;
outline: none;
}

.yith-wcbk-people-selector__field__plus-wrap svg, .yith-wcbk-people-selector__field__minus-wrap svg {
top: 10px;
position: relative;
left: 50%;
transform: translateX(-50%);
}

Best regards,
Ismael

Hi,
Thanks for your feedback, I tested the cooper-hewitt zip that I linked above on my demo site closer and it seems that each of the font files have the same font-weight of 400, which is odd, so I believe that when you try to use bold by changing the font-weight to 700 it was making it blurry, I believe this was also messing up the way the font manager works, if you see our documentation on Managing font variants the font family should show with its variants like this:

but this font was not, so I tried zipping each variant on it’s own and uploading them one at a time as shown in our documentation on File Structure, note in this screenshot that they all have the same font-weight:

then I created a test page with spans and custom classes to test the fonts:

<span class="cooperhewitt-thin">Cooper Hewitt - thin</span>
<span class="cooperhewitt-light">Cooper Hewitt - light</span>
<span class="cooperhewitt-book">Cooper Hewitt - book</span>
<span class="cooperhewitt-medium">Cooper Hewitt - medium</span>
<span class="cooperhewitt-semibold">Cooper Hewitt - simibold</span>
<span class="cooperhewitt-bold">Cooper Hewitt - bold</span>
<span class="cooperhewitt-heavy">Cooper Hewitt - heavy</span>

and added this css for the custom classes:

.cooperhewitt-thin {
	font-family: 'cooperhewitt-thin-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-light {
	font-family: 'cooperhewitt-light-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-book {
	font-family: 'cooperhewitt-book-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-medium {
	font-family: 'cooperhewitt-medium-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-semibold {
	font-family: 'cooperhewitt-semibold-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-bold {
	font-family: 'cooperhewitt-bold-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-heavy {
	font-family: 'cooperhewitt-heavy-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}

and this is the result:

please give this a try.

Best regards,
Mike

Hi,

You have open/incomplete CSS in Quick CSS:

/* CONTROLS RETURN TO TOP */
#scroll-top-link {
position: fixed;
border-radius: 2px;
height: 60px;
width: 60px;
line-height: 60px;
text-decoration: none;
text-align: center;
opacity: 0;
right: 50px;
bottom: 50px;
z-index: 1030;
visibility: hidden;
font-weight: bold;
font-size: 45px;

That is likely why the theme options are not applying.

Best regards,
Rikard

Hey Landsberg-Becher,
Thank you for your patience, I have looked back as far as 2018 and this css has not changed, font-size:11px !important; has always been there so it is not new with this update.
I have looked at your site and found a tag cloud on one page, but it is inside a Elementor Widget which is assigning the font color, family, and size

It looks like the page was built with Elementor so you should check it’s settings, we don’t support Elementor and don’t recommend it as it can cause conflicts with Enfold.

Best regards,
Mike