cancel
Showing results for 
Search instead for 
Did you mean: 

Problem with image on category page

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

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.