cancel
Showing results for 
Search instead for 
Did you mean: 

Problem with image on category page

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Problem with image on category page

Hello


The images on my category page are really tiny

 

The CSS responsible for this is

 

https://www.bars4cars.co.uk/products/roof-boxes.html

 

.products-list .product-item-photo {
width: 1%; }
 
I do not know why it is set at 1% and cannot find where I can edit the CSS file. I assume it is declared somewhere in the blank template and can be overridden in Solwin template I am using, but cannot figure it out. Any help would be appreciated.
3 REPLIES 3

Re: Problem with image on category page

Yes, that's a strange one. You've found the statement that is doing it. It's on line 4544 of https://www.bars4cars.co.uk/pub/static/version1504828472/frontend/Magento/blank/en_GB/css/styles-m.c...

 

From what I can see this isn't in Magento's blank theme css by default: https://github.com/magento/magento2/search?l=Less&q=%22.product-item-photo%22&type=&utf8=%E2%9C%93

 

Are you able to find it in your codebase by searching for ".products-list .product-item-photo"?

 

Alternatively, you should be able to override by redefining it lower down in the CSS tree:

 

 

.products-list .product-item-photo {
width: auto;
}
----
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution" as appropriate. Thanks!

Re: Problem with image on category page

If I edit the file

 

https://www.bars4cars.co.uk/pub/static/version1504828472/frontend/Magento/blank/en_GB/css/styles-m.c...


Wont I lose any changes on updates etc?

 

Thanks


Dean

Re: Problem with image on category page

@deano198308,

You have issue with your soldout.css file,

Just at below location,  https://www.bars4cars.co.uk/pub/static/version1504916306/frontend/Solwin/freego/en_GB/Solwin_Soldou...]

 

In your above soldout.css file, you have made changes for display:table-cell to display:block.

 

You have to keep display:table-cell and your issue solved,

 

You need to edit above file,

.products-list .product.photo.product-item-photo {
  position: relative;
  display: table-cell;
}

 

if issue solved, Click Kudos/Accept as solutions.

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial