I found the css snippet to make the product thumbnails appear on the cart page on mobile but there’s 2 dots before them. How do I remove those and then right align the images on tablet & mobile?
Tablet:
Mobile:
Thank you!
This topic was modified 12 months ago by scandidesignco.
The page I need help with: [log in to see the link]
When you’re in responsive mode, editing this page on Elementor, you have the option to add this custom CSS, which will move the product thumbnail to the right:
.elementor-widget-woocommerce-cart .woocommerce table.cart img {
float: right !important;
}
However, that dot is automatically added along with other information such as product, price, and label. If you choose to hide it, you’ll also hide other labels like products, prices, etc. But you can give this custom CSS a try to see whether it works or not:
td.product-thumbnail::before{
display: none;
}
Alternatively, I recommend getting in touch with Elementor support since you are using Elementor widget to build cart page. They might have different solution for this.
Please note that writing or providing custom code or customization is not within the scope of our support policy. Therefore, if you need help with custom development or customization tasks, we recommend that you seek help from:
Thanks so much! For whatever reason, adding: td.product-thumbnail::before{ display: none; } didn’t remove the product title or name, just the dots – YAY!
One more thing I’m hoping you can help me with. Above the product title it looks there’s about 20px of padding. How can I remove that so the product title is aligned with the thumbnail image? I looked under inspect element but I can’t find it.