-
Posts
-
hi
I have an issue with woocommerce on a phone screen on this siteI have recently rebuilt the site in Enfold from another theme (as Enfold is much better!!)
this is how it looks in Enfold
https://caravancitysales.com.au/wp/wp-content/uploads/2023/11/IMG_14A25BA7E081-1.jpegthis is how it looks in the other theme
https://caravancitysales.com.au/wp/wp-content/uploads/2023/11/IMG_B58C2EAA8334-1.jpeg
this theme has the following css
.single-car-mpg { display: none;
}
.price-description-single { display: none;
}
.carousel { align: center;
}
.found-cars-cloned { display: none;
}
.related.products {
display: none;
}
li.product-category.product {
width: 21%!important;}
li.product-category.product {
text-align: center !important;
}.product-category h2 {
font-size: 11px;
margin-bottom: 0;
}.woocommerce .products ul li h5, .woocommerce ul.products li h5 {
min-height: 90px;
}
body.stm-template-car_dealer #stm-boats-header #header .header-inner-content .listing-service-right .listing-menu > li.stm_megamenu > ul{
left: 0 !important;
}
.load-more-btn { display: none !important;;
}
@media (max-width: 768px) {
ul.products.columns-3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul.products.columns-3 li.product{
width: 32%;
}
}
.sub-menu {
background: #242628 !important;
border: none !important;
}
.sub-menu > li > a {
color: white !important;
}much is not related to enfold but there is specific stuff there fro woocommece
can you let me know what the correct css would be
Hey smarta-brett,
Thanks for the login details and screenshots. Could you post a link to where we can see the actual elements as well please?
Best regards,
Rikardsorry ! – I guess that will help !
Hi,
Thanks for that. This code is modifying the columns:
li.product-category.product { width: 21%!important; }I’m not sure exactly where it’s coming from though, since the page with the problem seems to be using a different installation?
Best regards,
Rikardsorry – I gave you the wrong admin
correct one belowI did have this css from a previous theme to make the 2 columns on the phone screen
I have now removed it from my new Enfold version of the site@media (max-width: 768px) {
ul.products.columns-3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
]
.ul.products.columns-3 li.product{
width: 32%;
}I just want have the category pics on the home page top disply in 2 or 3 columns
can you send me the correct css for thisHi,
Thank you for the update.
The previous css code should have worked, but you can try this one instead.
@media only screen and (max-width: 768px) { /* Add your Mobile Styles here */ .responsive #top #main .products .product { margin: 0 0 20px 0; width: 50%; } }Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings to make sure that the changes take effect.
Best regards,
Ismael
- You must be logged in to reply to this topic.