Hi bassato,

Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

@media only screen and (max-width:767px) {
    #top .woocommerce-cart-form .shop_table.cart .cart_item {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item td:before {
        content: attr(data-title) ": ";
        font-weight: 700;
        float: left;
    }
    
    #top .woocommerce-cart-form thead,
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-remove:before {
        display: none;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-remove, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-price, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity {
        display: block;
        width: 100%;
        padding: 12px 20px;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-price, 
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity {
        text-align: right;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name .component-name {
        max-width: 220px;
        margin-left: auto;
        padding-left: 0;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-name .component-name * {
        float: right;
    }
    
    #top .woocommerce-cart-form .shop_table.cart .cart_item .product-quantity .quantity {
        width: 170px;
        margin-right: 0;
    }
}

Please let us know if it helps.

Best regards,
Nikko

Hi Stilecatalini,

Can you give us a screenshot? I can’t seem to find the issue you mentioned on the link you given, I have checked it using a windows desktop in Chrome, Edge and Firefox.

Best regards,
Nikko

Hi Sckilayre,

Thanks for giving us admin access.
I changed Javascript File Merging And Compression from Enable – merge and compress all theme javascript files to Use minified theme javascript files without merging in Enfold > Performance. And it seems to have fixed the issue.
Please review your website.

Best regards,
Nikko

Hi Beat,

I think Rikard’s code should work just fine, you seem to replace line-height 20px to 15px, and the original value is 14px that’s why you barely see any difference, try changing it back to 20px or a higher value and it should work just fine.

Best regards,
Nikko

Hi ijnavas,

In the Icon Link please put:

mailto: (Email address hidden if logged out) 

just change the email address part.

Best regards,
Nikko

Hi RENZCOM,

I’m glad that Rikard could help you :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko

Hi,

Please add this class name to the last column right-column
Then try to replace your code with this CSS code in Quick CSS:

#top .overlapping-columns {
    position: absolute;
    z-index: 100;
    margin-left: 0;
    width: calc(29.333333333333332% + 400px);
    left: 50%;
    transform: translateX(-50%);
}

#top .right-column {
    float: right;
    margin-left: 0 !important;
}

Best regards,
Nikko

Hi pampself,

I’m glad that we could help you :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko

Hi wexoe,

To assist you further, please provide us with your login credentials by following these steps:

1. Install and activate the “Temporary Login Without Password” plugin. You can find it here.
2. Once activated, navigate to “Users > Temporary Logins” in the left-side menu.
3. Click on “Create New” to generate a temporary login.
4. Enter the email address for the account (you can use (Email address hidden if logged out) ) and select the highest possible role. Set the expiry date to around four days to ensure enough time for debugging.
5. Click “Submit” to create the temporary account.
6. In the private section, provide us with the URL that allows us to access the temporary login and assist you.

Please note that once your issue is resolved, you can remove the plugin. Alternatively, if you prefer not to use the plugin, you can manually create an admin user and share the login credentials in the “private data” field.

If you have any further questions or concerns, please let us know.

Best regards,
Nikko

Hi octopussolutions,

I think what you made is the correct solution, to fix the border radius issue, please add this inside the media query:

.html_header_top.html_header_transparency #header .header_bg {
    border-radius: 8px;
}

Hope it helps.

Best regards,
Nikko

Hi sarthakchoudhary,

The image sizes used is 705 x 705px, so unless it’s a square image, some parts of the image would be lost, otherwise, the layout will break.
You can change the size by adding this PHP snippet in your child theme’s functions.php file (or use plugin like WPCode to add PHP snippet):

function enfold_customization_modify_thumb_size( $size ) {
  $size['masonry'] = array( 'width' => 705, 'height' => 705 , 'crop' => false );
  return $size;
}

add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );

Just adjust the values as you see fit.
Hope it helps.

Best regards,
Nikko

Hi octopussolutions,

Please try to add this CSS code in Enfold > General Styling > Quick CSS:

@media only screen and (min-width:1080px) {
  .html_header_top.html_header_transparency #header {
    background-color: white;
    margin-top: 30px;
    max-width: 1080px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    overflow: hidden;
  }
}

This code only takes effect on desktops and laptops but not on tablets and mobile phones.
Hope this helps.

Best regards,
Nikko

Hi pampself,

For the background color of the canvas, please try to add this CSS code in Enfold > General Styling > Quick CSS: (just change the color value as you see fit)

#top.home .container_wrap_first {
    background-color: white;
}

To reduce the height, please add this CSS code (and adjust the padding values)

#top.home .container_wrap_first main.content {
    padding-top: 50px;
    padding-bottom: 20px;
}

Best regards,
Nikko

Hi stephaniebLOS,

I can’t seem to find the triangle to the left of the text you mentioned, can you give us a screenshot?

You can upload the screenshots in Savvyify, Imgur, Dropbox or other online image sharing websites, then post the link here (or in private content).

Best regards,
Nikko

Hi ihf-eramstad,

You can use Widget Area (under Content Elements) so you can place that widget properly.
Hope this helps.

Best regards,
Nikko