Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1447000

    Hi, I want to include a product slider at the top of my post under the fullwidth easy slider. I want the images to be small such as a WooCommerce Gallery Tumbnail 100 x 100. No matter which image size I choose under styling it comes out at a standard size the same as that shown at the bottom of the page (I believe 450 x 450). How can I get it to resize to a smaller image?

    Thanks,

    #1447046

    Hey keifygeorge,

    Thank you for the inquiry.

    We didn’t find any product sliders on the page above. Did you remove them? The correct thumbnail size displays in the slider when we tested this on our own installation.

    Best regards,
    Ismael

    #1447226

    Hi Isamel,

    Can you try again. I have confirmed that it is there https://westcoasthammocks.com.au/superjumbo-adwords-landing-page/

    #1447388

    Hi,
    Thanks for the login, it seems that these only show when we are logged in, nonetheless, the element will fill the available width so one way is to add the element in a column that is smaller, or add more items shown in the element, I changed it to show 5 instead of 3 and you will see that it is much smaller now, please check if this will work for you, or try adding a smaller column.

    Best regards,
    Mike

    #1447402

    Thanks Mike, changing to 5 images has helped. I have changed the size back to 450 x 450 as 100 x 100 had them showing blurred, Unfortunately this doesnt help with the mobile format, they still look big there. Is there anythign that can be done on the mobile side of things? Can I select to show one on mobile format or get them to be smaller?

    #1447432

    Hi,
    For mobile I added a second product slider:
    Enfold Support 6003
    and set the visibility so it will only show on very small screens:
    Enfold Support 6001
    and made the other one not show on very small screens:
    Enfold Support 5999
    Then I set the new one to only show two items and added this css so the two columns will show side-by-side and removed extra padding & margin so it will look better on small mobile screens:

    @media only screen and (max-width: 479px) { 
    .responsive #top #main .avia-product-slider-container.av-small-hide .products .product {
    	width: 49%;
    	margin: 0 1% 1% 0;
    }
    #top.page-id-5132 #after_full_slider_1 .template-page.content {
    	padding: 0;
    }
    .responsive #top #main .avia-product-slider-container.av-small-hide {
    	margin: 0;
    }
    }

    The css to remove the extra padding & margin is only for this one page, let me know if you want other pages like this. Alternatively we could make the product slider with 5 columns show them side-by-side, but this takes a lot of space and the odd number of items doesn’t look as good, in my opinion, but if you like you could make the new one show four items if you wish. Take a look and try ddifferent numbers to see what you like.

    Best regards,
    Mike

    #1448379

    Thanks, this seems to have worked well.

    #1448392

    Hi,

    Glad to know that this has been resolved! Please don’t hesitate to open another thread if you have more questions regarding the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Product Slider Image Not resizing’ is closed to new replies.