Hi,

Thank you for the clarification.

To adjust the breakpoint of the element visibility settings, please try to add this css code.

@media only screen and (min-width: 990px) {

    .responsive.av-no-preview #top #wrap_all .av-desktop-hide,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden {
        display: block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {

    .responsive.av-no-preview #top #wrap_all .av-medium-hide,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden {
        display: block;
    }
}

@media only screen and (min-width: 1366px) {

    .responsive.av-no-preview #top #wrap_all .av-desktop-hide,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1366px) {

    .responsive.av-no-preview #top #wrap_all .av-medium-hide,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
    .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden {
        display: none;
    }
}

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the style of the elements in the cart dropdown widget, please add this css code.

#top div ul.product_list_widget li a {
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.6em !important;
}

#top .dropdown_widget ul.product_list_widget li .quantity {
    color: #ffffff;
    font-size: 1em;
}

#top .dropdown_widget .total span.woocommerce-Price-currencySymbol, #top .dropdown_widget .total {
    color: #ffffff;
    font-size: 1em;
}

Best regards,
Ismael

Hi,

Thank you for the clarification.

Please use this css code to adjust the style of the H1 element in the product category page.

#top #wrap_all .term-description h1 {
    font-size: 2em;
    color: red;
}

Best regards,
Ismael

Hey bemodesign,

Thank you for the inquiry.

1.) Please use add this code to adjust the size of the table and product title.

.is-large.wc-block-cart .wc-block-cart-items th span {
    font-size: 2em;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 2em;
}

2.) And include this code to hide the label while typing on the fields.

.wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input.is-active label {
    display: none;
}

3.) Add this code in the functions.php file to remove the additional informations tab.

/** Remove product data tabs */

add_filter( 'woocommerce_product_tabs', 'my_remove_product_tabs', 98 );

function my_remove_product_tabs( $tabs ) {
  unset( $tabs['additional_information'] ); // To remove the additional information tab
  return $tabs;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect. 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

Hey navindesigns,
Thank you for the link to your site and your example, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_single_post_banner() { ?>
  <script>
(function($) {
  $(function() {
  	var postTitle = $('.single-post h1.post-title').detach().text();
  	var postBanner = $('<div class="banner"><h1>'+ postTitle +'</h1></div>');
     $('.single-post .big-preview.single-big').detach().insertBefore('.container_wrap_first');
     $(postBanner).insertAfter('.single-post .big-preview.single-big img');
  });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_single_post_banner', 99);

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top.single-post #wrap_all .all_colors .big-preview.single-big .banner h1 {
	font-size: 18px;
}
.single-post .big-preview.single-big .banner {
	top:18%;
	padding:0 5%;
}
}

.single-post .big-preview.single-big {
    padding: 0;
	pointer-events:none;
}
.single-post .big-preview.single-big .banner {
	top:30%;
	position:absolute;
	z-index:4;
	padding:0 10%;
	color:#000;
}
.single-post .banner h1 {
	background-color: rgba(255,255,255,71%);
}

@media only screen and (min-width: 1440px) { 
.single-post .big-preview.single-big {
	max-height: 450px;
}
.single-post .big-preview.single-big a img {
	transform: translateY(-20%);
}
.single-post .big-preview.single-big a {
	max-height: 450px;
}
.single-post .big-preview.single-big .banner {
	top:36%;
	padding:0 15%;
}
}

it will take the single post feature image and title from the default layout like this:

and create a full width banner with the title in it like this:

On mobile it should look like this:

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
The subline above is calling the font-family “calibriz” which is not correct, it should be font-family “calibri-cursiv-bold”
So please correct your css to this:

#top .av-special-heading .av-subheading.av-subheading_above {
font-size: 32px !important;
    font-family: 'calibri-cursiv-bold'!important; 
    font-style: italic; bold !important; 
    color: #ff0044 !important;
}

then clear your browser cache and check.

Best regards,
Mike

Hey JoStudioDeRijp,

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

#header_meta ul li a {
  font-size: 14px;
}

Best regards,
Rikard

Hi,

Thank you for the update.

The account above doesn’t have admin rights, so we were not able to adjust anything. To adjust the style of the post headings, go to the Enfold > Advanced Styling panel and configure the H3 heading element. You can also use this css code.

.html_elegant-blog #top #wrap_all .avia-content-slider .slide-entry-title {
    color: red;
    font-size: 20px;
    font-weight: normal;
}

Best regards,
Ismael

Hey pikkuapuri,

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

.slide-entry-title a {
  font-size: 16px;
  word-wrap: break-word;
}

Best regards,
Rikard

Hey James,

Please try this CSS instead:

.team-member-description p {
  font-size: 16px !important;
}

Best regards,
Rikard

Hey ursulamerten,

Thank you for the inquiry.

You can use this css code to adjust the style of the phone number info.

.phone-info div {
    line-height: 1em;
    font-size: 2em;
    color: red;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

Best regards,
Ismael

Hi,

dashes not displaying under the “HIGHLIGHTS” and “WHAT’S INCLUDED” headers

Glad to know that you managed to solve most of the issues. To make the dashes display, try to edit the following css code and set the display property to block.

.costa-rica-highlightsec ul.highlight-bullet li:before {
    content: ""!important;
    width: 15px;
    height: 6px;
    background-color: #97cfe9;
    margin-right: 15px;
    margin-bottom: 6px;
    font-size: inherit;
    display: block;
}

Best regards,
Ismael