Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 17, 2025 at 6:07 pm #1477270
    ballindigital

    Hi,

    I’m trying to create a blog post for a single product.

    I would like to use the Single Product Slider and/or Product Grid in the Plugin Additions and show just one product.

    The issue is, is that I can only display a minimum of 2 columns which isn’t what I want.

    I only want to show one column.

    Is there a way to do this?

    Thanks,

    Harvinder

    February 18, 2025 at 3:39 am #1477291
    Ismael

    Hey ballindigital,

    Thank you for the inquiry.

    You can add this css code to adjust the width of the columns:

    .shop_columns_2 .products .product {
    width: 100%;
}

    If you need to apply this to a specific Product Grid element, you have to apply a Custom CSS Class name or ID to the element.

    — https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    February 18, 2025 at 1:53 pm #1477324
    ballindigital

    Hi – thanks that worked but only for desktop.. Not the mobile.

    February 19, 2025 at 4:26 am #1477360
    Ismael

    Hi,

    Where can we check the Product Grid element? Please create a test page, then provide the page URL in the private field.

    Best regards,
    Ismael

    March 3, 2025 at 7:32 am #1478437
    ballindigital

    Hi,

    Can you do this on our staging site please?

    Details are below

    It would also be good to be able to adjust the size because on desktop, it takes up the entire page which is way too big.

    Product Slider

    March 4, 2025 at 5:44 am #1478532
    Ismael

    Hi,

    We added this code in the Quick CSS field:

     .responsive #top #wrap_all #main .products .product {
    width: 100% !important;
}

    And removed this from the Appearance > Customize > Custom CSS field:

      .responsive #top #wrap_all #main .products .product {
    width: 48% !important;
  }

    Best regards,
    Ismael

    March 6, 2025 at 4:04 pm #1478771
    ballindigital

    Hi – I can’t see where this has been done..

    @media only screen and (max-width: 479px) {
    .responsive #top #wrap_all #main .products .product {
    margin: 0 1% 1% 0;
    width: 49%;
    }
    }

    I could only see this in the Theme Options?

    March 7, 2025 at 6:02 am #1478823
    Ismael

    Hi,

    We remember adding it to the Quick CSS field, but it’s not there anymore. The css you posted above is being overridden by this rule in the woocommerce-mod.css file.

    .responsive #top #main .products .product {
	margin: 0 0 20px 0;
	width: 100%;
}

    You can also add the same css manually in the live site if necessary.

    Best regards,
    Ismael

    March 7, 2025 at 11:03 am #1478844
    ballindigital

    Just to clarify, should I delete this:

    @media only screen and (max-width: 479px) {
    .responsive #top #wrap_all #main .products .product {
    margin: 0 1% 1% 0;
    width: 49%;
    }
    }

    And replace it with this?

    .responsive #top #main .products .product {
    margin: 0 0 20px 0;
    width: 100%;
    }

    March 9, 2025 at 3:00 pm #1478936
    Mike

    Hi,
    When I check your staging site, the products are in one column:
    Screen Shot 2025 03 09 at 9.57.33 AM
    do you mean these:
    Screen Shot 2025 03 09 at 9.58.51 AM

    Best regards,
    Mike

    March 9, 2025 at 7:00 pm #1478963
    ballindigital

    Hi,

    I think we’re getting confused here..

    This was the original query:

    “I’m trying to create a blog post for a single product.

    I would like to use the Single Product Slider and/or Product Grid in the Plugin Additions and show just one product.

    The issue is, is that I can only display a minimum of 2 columns which isn’t what I want.

    I only want to show one column.

    Is there a way to do this?”

    >>>>

    I’m trying to amend the Single Product Slider and/or Product Grid in the Plugin Additions and show just one product for Blog Posts only.

    I do not want the ‘Our Best Selling Products’ part to stack. I want them side by side like on the live site.

    March 10, 2025 at 7:05 am #1478994
    Ismael

    Hi,

    Try to include this css rule inside the media query (max-width: 479px) to adjust the width of the items in the product slider:

    .responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 0 20px 0;
    width: 100%;
}

.responsive #top #main .av-19u5brg-c8bf1da9222c2acf3c8412eb09911916 .products .product {
    margin: 0 1% 1% 0;
     width: 49%;
}

    This should maintain the layout of the items in the “Our Best Selling Products” section.

    Best regards,
    Ismael

    March 10, 2025 at 10:45 am #1479013
    ballindigital

    Ok, but which css is causing this?

    I’ll need to delete it?

    https://img.savvyify.com/image/Screen-Shot-2025-03-09-at-9.57.33-AM.9EFzO

    March 11, 2025 at 11:26 am #1479073
    Ismael

    Hi,

    That is probably due to this css code:

    .responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 0 20px 0;
    width: 100%;
}

    We no longer see this issue when we checked the site live.

    If the issue persists on your end, you can include this code in the css media query:

    .responsive #top #main .avia-product-slider-container .products .product {
    margin: 0 1% 1% 0;
    width: 49%;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.