- Priority: 0
- Status: Closed
- Theme: Alysum
-
Assigned To:
Fred
- Private: No
- Open Date: 01.06.20, 10:08
- Opened by: Ebony Bragg
- Closed by: Fred
- Closed on: 10.06.20, 16:03
- Reason: Closed
- Comment: Glad to help!
Ticket #18182 - Thumbnails
Hello, which image setting do we need to change to adjust the size of the additional images on the product pages?
Comments
there is no such settings, you can only do that with custom CSS
We need custom css to change the size of the images pointed out in the screenshot? None of the image option sizes in Design-Images control the size of these additional images?
Attachments:
Screen Shot 2020-06-01 at 12....(393.3 KiB)Try following CSS to manage width of image sections
For Thumbnails:
#product .page-product .images-container > .mask {width:15%;min-width:15%;margin:0}For Main Image
#product .images-container .product-cover {width:85%;min-width:85%}Hello, we used the css for the thumbnails and no change applies. Our thumbnails drop past the product image itself when we have more than 3 additional images. We would like to make them smaller so that when we add more images there would be an arrow to scroll through additional images while it is still lined up with the product image.
Attachments:
Screen Shot 2020-06-05 at 11....(431 KiB)Set Current Configurations as Custom Preset under the Welcome section is not working. It makes Custom appear in the preset options, but the preset does not work. When we select it, an empty page loads with no layers. Our website keeps bouncing back to the “OldStyle” without our custom settings. So we have had to go back and put our customs in several times. Themeforest shows that there is an update to 5.5.1 but it does not register as an available update in the Theme Settings 2020.
1. There is no update yet.
2. Yes, when you select a preset, for example “Classic”, it automatically switch all layouts (header, footer and home page) to “Classic”, but if you are using custom preset, there is no layouts and you have to select them manually in the Page builder
So the only thing is we didn’t change the preset option. We reached out about changing the thumbnail size and moving the product title up higher than where it is now. Someone replied and said they adjusted the height of the product name, but that did not work. When we looked at the settings and preset, the option that we were using was changed. But we did not change it. We also used the css that we were given here to adjust the size of thumbnails and it did not apply any changes.
Where did you add your custom CSS? Please make sure you have disabled CSS Smarty cache in the Performance settings
#product .page-product .images-container > .mask {width:5%;min-width:5%;margin:0}
#product .images-container .product-cover {width:85%;min-width:85%}
We used these codes in Theme Settings 2020 - Custom CSS - Smarty css cache is off
this code works for me for sure https://take.ms/3KcHT
#product .images-container > .mask {width:15%;min-width:15%;margin:0}That css worked PERFECTLY, the other one was 85 and we should’ve had 15 like you sent. Thank you so much!!!
How to move the product label back to main image
Attachments:
Screen Shot 2020-06-08 at 2.4...(186 KiB)Try this:
#product .product-flags {right:auto; left:60px}That works on product page, but it centers in on the products in the same category
Attachments:
Screen Shot 2020-06-08 at 3.5...(195.2 KiB)Try this
#product .page-content .product-flags {right:auto; left:60px}We tried that css but the labels are still centered.
But as I can see you didn’t update the code
https://take.ms/oXRoV
This is the code that you gave us to use: #product .page-content .product-flags {right:auto; left:60px}
The code that you gave us for the main product image works, but this one isn’t working for the product page content
you just forgot to remove wrong CSS line, I just did it for you
Awesome. thank you