3px cropped at the bottom of the item preview image on the search results page

Envato Authors CodeCanyon
#1

Please visit this search results page:

Look on the item preview image, it’s cropped at the bottom for all the items.

For example, see my item profile page:

You can see that there is a red border (2px) at the bottom of the preview image. But on the search results page this red border is not visible.

This issue doesn’t appear on the ThemeForest search results page.

I want to ask somebody from Envato stuff to fix this issue, because some items looks ugly on the search results page when there is 3px cropped at the bottom.

Thank you for attention!

1 Like
#2

Yes you are right. In search result page are showing crop image 382x194 px where the preview image is 590x300 px. So for cropping around 2px cropped the main preview image. Thanks

#3

It’s not right, I’m talking not about image resizing (descreasing the size), I’m talking about a CSS issue that appears only on CodeCanyon website, while it doesn’t appear on the similar page on ThemeForest website. The image is resized to 382x196 px automatically by the browser, but because of issue in the CSS styling only 382x194 px displayed (2-3px cropped at the bottom).

You can check that it’s the CSS issue if you open a Developer Console in your browser (press F12) and check the item preview image block and its container. There is a small CSS issue that makes 3px unvisible at the bottom, at this issue could be fixed easily by any Frontend Developer during 5 minutes by fixing CSS styles for this block and its container.

#4

Have you checked another place as like themeforest. All are using the same coding for making that crop preview in search page and also in themeforest image are getting cropped around 2 px at bottom. You can check at themeforest: https://prnt.sc/p2czwf
All marketplace are using the same coding techniques for showing preview image in search result page.

can you give me the css issues screenshots as I have seen image are showing using crop coding not css.

Thanks

#5

Actually the HTML and CSS code are different on the ThemeForest and CodeCanyon.

This is the search results page on the CodeCanyon:

This is the search results page on the ThemeForest:

On CodeCanyon the image is resized to 386x196, but displayed 386x193 because of the incorrect “padding-top: 50%” style of the image container tag.

On ThemeForst the image is resized to 386x196, and displayed the same 386x196 because of the correct “padding-top: 50.8475%” style of the image container tag.

Just put the same value of “padding-top: 50.8475%” on CodeCanyon and the image will become 386x196.

I can do that in the Developer Console in my browser and this change fixes the bug. So need that somebody from Envato Team probably Frontend Developer fix this bug in their CodeCanyon codebase.

#6

Hi

I have edited my last reply and added a new image where you will see in themeforest search result also cropping around 2/3 px from the bottom. Yes I also checked in codecanyon if you set padding-top: 50.845% instead padding-top: 50% your image border will show but I am not sure about this fixing because in themeforest is using padding-top: 50.847457627118644%; but image is cropping 2/3 px from the bottom. To see my screenshots item just search in themeforest with keyword ‘bootstrap’ and go to page 3.

By the way if you are interested you can contact support and let them know about it but I think it is not a major issue where in item details page all is fine.

Thanks