Hi, the related products section at the bottom of all my WooCommerce products looks a little messed up on mobile. Here is a screenshot: https://prnt.sc/p7ykro.
The column spacing between them is inconsistent, the font-size is too large, and the looks smashed oddly together.
Is there a way to fix this? Maybe just show 2 columns on mobile?
Hi, The responsive options would change the h2 font-size everywhere on the site which I do not want to do. I just want to change the Cross-Sells product font size on the cart page. Thanks for the input Rafael, but that CSS didn't work for me. I tried adding this (which also didn't work):
Oh.. got it. The CSS code that worked for me are not for cross-sells on the cart page (i dont use that). The css works fine on products page in the `related products` section. Dont know how to help you.. good luck.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi, the related products section at the bottom of all my WooCommerce products looks a little messed up on mobile. Here is a screenshot: https://prnt.sc/p7ykro.
The column spacing between them is inconsistent, the font-size is too large, and the looks smashed oddly together.
Is there a way to fix this? Maybe just show 2 columns on mobile?
Thanks!
Also the Cross Sells on my cart page have the same issue: https://prnt.sc/p7ypji
Hey Again,
Try using the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .
Best.
ThemeNectar Support Team
Caleb,
I had the same problem and solved using this custom CSS. Try this code on General Settings > CSS/related
#ajax-content-wrap .related.products h2 {
font-size: 18px; /* Corrects font-size on related products (forced) */
}
Hi, The responsive options would change the h2 font-size everywhere on the site which I do not want to do. I just want to change the Cross-Sells product font size on the cart page. Thanks for the input Rafael, but that CSS didn't work for me. I tried adding this (which also didn't work):
.cross-sells h2.woocommerce-loop-product__title {
font-size: 12px !important;
}
Screenshot: https://prnt.sc/pg6uwm
Any ideas? Thanks!
Oh.. got it. The CSS code that worked for me are not for cross-sells on the cart page (i dont use that). The css works fine on products page in the `related products` section. Dont know how to help you.. good luck.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 999px) { .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h2, .woocommerce-page ul.products li.product h2 { font-size: 25px !important; line-height: 28px !important; } .products li.product.minimal .product-meta { padding: 5px !important; } }Thanks
ThemeNectar Support Team
Awesome that worked, thanks!