This topic has 11 replies, 4 voices, and was last updated 9 years, 1 months ago ago by Jack Richardson
Hi,
In the custom.css file was able to remove the title, price and “add to cart” button from the product slider, but I’ve run into some issues.
1. I leaves a big space underneath
2. Its different in desktop and mobile view. If I change the margin, or container size, it effects one or the other.
Basically, on the homepage, I want a product slider, but no titles, price or buttons. Just the image and the slider. I’d also like to make sure there is not a large space underneath and the scroll buttons are aligned on the sides.
Can you assist?
correction:
Hi,
In the custom.css file *I* was able to remove the title, price and “add to cart” button from the product slider, but I’ve run into some issues.
Hello
Please add folowing code into the custom.css to remove white space underneath:
.slide-item .product .product-image-wrapper, .products-grid .product .product-image-wrapper{margin:0}
.slide-item .product .add-to-container, .products-grid .product .add-to-container{padding:0}
.items-slider.products-slider.-container.slider-7845{margin:0}
Please specify whta issues you are expiriencing. You may use this service to point us in the right direction: http://prntscr.com/.
Regards,
Brian Johnson
Hey Brian,
Much appreciated for the super fast reply! Thanks, that’s looking so much better. There’s still a small gap I’d like to reduce. Can you help make that a bit smaller?
Thanks!
Rob
Hello,
Try to add this code in custom.css
.items-slider {
margin-bottom: 20px;
}
Regards,
Robert Hall.
Thanks Brian and Robert.
The first step helped, but the second step didn’t do anything. Instead of a margin of 20px I used -30px, but now something strange happens. Different size screens use a different size image, and there is a different size margin after the slider. Also, when the slider goes to the last image, the margin jumps up and the slider is above the text and section below it.
Not sure how to handle this, but it’s taken up a lot of time to fix.
If you have any more suggestions, I’m all ears.
Thanks!
Hello
Please try to add following code into the custom.css:
.slider-container {margin-bottom:-40px }
@media (max-width: 979px) and (min-width: 768px){.slider-container {margin-bottom:-290px }}
@media (max-width: 768px) {.slider-container {margin-bottom:-150px }}
Regards,
Brian Johnson
looks good, but on mobile, when you swipe to the last item, the blocks below just up and get smooshed and covered up. Strange. Can you take a look at the main site on mobile? Thanks!
Hello
Please try to add this code and adjust positive margin value:
@media (max-width: 767px) and (min-width: 481px){
.slider-container {margin-bottom:60px }}
Regards,
Brian Johnson
Things got a bit messy with the custom code, so I found another solution with another plugin. Thanks for the help, but the solutions above never really fixed the issue. Basically, I just wanted a slider of product images, but couldn’t without removing everything in the custom css, then it caused strange behavior and was more trouble than it was worth.
If you have a theme solution for product image slider, I’d love to hear it.
Thanks,
Rob
Hello,
Could you please show a screenshot of your problem?
Thank you.
Best regards,
Jack Richardson.
Tagged: buttonless, priceless, product slider, themes, titeless, woocommerce, wordpress
You must be logged in to reply to this topic.Log in/Sign up