Product Slider – Remove Title, Price and Button

This topic has 11 replies, 4 voices, and was last updated 9 years, 1 months ago ago by Jack Richardson

  • Avatar: rwlee33
    rwlee33
    Participant
    October 8, 2015 at 11:11

    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?

    Please, contact administrator
    for this information.
    10 Answers
    Avatar: rwlee33
    rwlee33
    Participant
    October 8, 2015 at 11:16

    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.

    Avatar: Brian Johnson
    Brian Johnson
    Member
    October 8, 2015 at 11:19

    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

    Avatar: rwlee33
    rwlee33
    Participant
    October 8, 2015 at 12:36

    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

    Avatar: Robert Hall
    Robert Hall
    Support staff
    October 8, 2015 at 12:41

    Hello,

    Try to add this code in custom.css

    .items-slider {
    margin-bottom: 20px;
    } 

    Regards,
    Robert Hall.

    Avatar: rwlee33
    rwlee33
    Participant
    October 8, 2015 at 23:55

    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!

    Avatar: Brian Johnson
    Brian Johnson
    Member
    October 9, 2015 at 07:48

    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

    Avatar: rwlee33
    rwlee33
    Participant
    October 9, 2015 at 13:14

    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!

    Please, contact administrator
    for this information.
    Avatar: Brian Johnson
    Brian Johnson
    Member
    October 9, 2015 at 14:03

    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

    Avatar: rwlee33
    rwlee33
    Participant
    October 21, 2015 at 03:32

    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

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 21, 2015 at 08:13

    Hello,

    Could you please show a screenshot of your problem?

    Thank you.

    Best regards,
    Jack Richardson.

  • Viewing 11 results - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.