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

Hi,

Please try this for the sidebar lists:

.sidebar .widget ul {
    padding-left: 18px;
    list-style: disc;
}

I can’t see any specific styling being applied to this text:

At Live Edge Wood Craft, we work hard to make sure our customers have a great experience. Whether you’re a craftsman looking for live edge slabs to use in your customer’s project, or a consumer looking for live edge slabs or custom furniture, you’ll get the best from us.

That means it will get the default styling of 13 pixels from the theme. If you want to change the default font size, then you can do so under Enfold->General Styling->Typography. If you want specific styling for that paragraph only, then you can do it manually like this:

<p style="font-size: 16px;">Your text goes here</p>

Best regards,
Rikard

Hey bhardy2022,

Thank you for the inquiry.

You can use this css code to adjust the style of the scroll-to top link.

#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: 30px;
}

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

Best regards,
Ismael

Hi,

Thank you for the screenshot.

We can decrease the font size and adjust the word-wrap property to make sure that whole words break into the next line instead of single characters.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .avia-promocontent h1 span {
    word-break: break-word;
    font-size: 20px;
  }
}

Expected result: https://1drv.ms/u/s!AjjTfXSRbKTvwFtJsaq9EhFLeQzO?e=ZerX9i

Best regards,
Ismael

Hey Sabine,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab and adjust the font size (“18px”) as needed

@media only screen and (max-width: 480px) {
#top .all_colors mark {
  font-size: 18px;
}
}

Regards,
Yigit

Hi,

Thank you for reporting this – and very sorry for the problems.

Icon Grid problem should be solved – please check your staging site. Was caused by a wrong selector to apply the selected font size (resulted in a wrong padding).

Widget problem also solved for ALB Widget area.

Already added for next update 4.9.2.2 which is planned in the next days.

If you do not want to wait you can copy the 2 modified files (do not forget to make backups of the original files for a fallback):

enfold\config-templatebuilder\avia-shortcodes\icongrid\icongrid.php
enfold\config-templatebuilder\avia-shortcodes\widgetarea\widgetarea.php

And you need to save theme options to invalidate the post css files and clear server and browser cache.

Best regards,
Günter