Thumbnail Image sizing issues with DAWN theme

Store Design
, ,
1

Hi all,

I am using the DAWN theme on my website www.casafenix.co.uk and have an issue with thumbnail image holders not displaying images correctly. There are thousands of images int eh store and of different sizes so I need the images to resize correctly in a thumbnail image.

If you look at this page https://www.casafenix.co.uk/collections/serenity-sofas you will see that images are too big within the thumbnails.

Any advice would be appreciated.

20 aug 24.jpg
20 aug 24.jpg1600×900 135 KB

1 Like
2
  • Here is the solution for you @CasaFenix
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.card .media.media--hover-effect>img:only-child, .card-wrapper .media.media--hover-effect>img:only-child {
        transition: transform var(--duration-long) ease;
        object-fit: contain !important;
    }
  • Here is the result you will achieve:

BSSTekLabs_0-1724154202160.png
BSSTekLabs_0-1724154202160.png1772×886 206 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Hi @CasaFenix I hope you are doing well, kindly follow the below instructions:

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.css file

  3. Paste the below code and save

.card__media .media img {
        object-fit: contain !important;
    }

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

Hello @CasaFenix
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-card.css
add this code at the end of the file.

.card__media .media img {
object-fit: contain;
}

result

14.png
14.png1049×757 196 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like
5

Hi, thank you so much that was an easy fix that I could implement without having to learn code etc, it is very much appreciated and I will message you privately now. Thanks Mike :slightly_smiling_face:

6

Thanks for accepting the solution

please hit the like button also.

7

Thank you, for reference I used the following solution -

.card__media .media img { object-fit: contain; }

Kind regards
Michael

8

Your most welcome, kindly give my solution like and mark it solution if its working for you.

9

Thank you, for reference I used the following solution -

.card__media .media img { object-fit: contain; }

Kind regards
Michael