By Paul Murray on Tuesday, 13 June 2017
Posted in General Issues
Replies 4
Likes 0
Views 426
Votes 0
Hi Si Team

If you can go here you can see two types of preview images for Hika Shop products.

https://www.finalbug.net/hikashop-menu-for-brands-listing/product/23-fcpx-foundations

Which I can configure under the Hika Shop Menu System/Configure/Files/Images…

Thumbnail (width x height) = the size of my related products.

Product page image (width x height) = the size of my products.

Is there any way to influence the size of the product thumbnails when they show up here:

https://www.finalbug.net/paul-david-murray/233-course-list

I have played with the settings in HikaShop and they do not seem to have any effect on the Thumbnails at the ES end!

thanks

Paul
Hi Paul,

I've tried to configure the same setting on my local seems I cannot replicate this
Can you try to apply the css code below and see how it goes?

#es .es-hika-item__img{
flex: 0 0 213px;
background-size: contain !important; }

·
Tuesday, 13 June 2017 11:25
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Fadhli

I have added the following:


/* improve the formatting of ES Hika Shop Thumbnail on Course App Page */

#es .es-hika-item__img{
flex: 0 0 213px;
background-size: contain !important; }


here: public_html/templates//elegant/css/custom.css

Cleared my Browser Cache, Joomla Cache & Cloudflare Cache and things look way better

Please see the screen shots.

Would it be possible to get 5px padding all around the image so it looks perfect?

Would you have a code suggestion?

thanks

Paul
·
Tuesday, 13 June 2017 15:59
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Paul,

Perhaps you can add another style in the same class above as(become):

/* improve the formatting of ES Hika Shop Thumbnail on Course App Page */
#es .es-hika-item__img{
flex: 0 0 213px;
background-size: contain !important;
margin: 10px !important
}

and see how it goes?
·
Tuesday, 13 June 2017 17:33
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post