Images Cropped or Not Fully Loading on Website - HTML/CSS Issue?

Community
1

Hi everyone,

I’m facing an issue on my website where the images are either getting cropped or only half-loading. The images are supposed to display in full, but they seem to be cut off or not loading properly, especially on collection pages and product grids.

I’m wondering if this is related to the way the HTML or CSS is structured. The images are dynamically loaded from a CMS, and the issue seems to persist across different devices and browsers. I’ve checked for possible padding or margin conflicts but can’t seem to pinpoint the exact problem.

Website Link: https://spiritualgleam.com/ ( check this images are not loading fully )

Here’s a sample of the HTML and CSS code used:
HTML:

Product

CSS:

.product-image {
width: 100%;
height: auto;
object-fit: cover;
overflow: hidden;
}

Is there anything obvious I might be missing? Could this be an issue with how the image container is sized or maybe the server-side image processing?

Any guidance or tips would be much appreciated

1 Like
2

Screenshot 2024-09-13 091032
Screenshot 2024-09-13 0910321919×697 126 KB

issue image

3

Doesnt happen for me.

{58D9D989-B1F5-4B90-A5D8-D3D3FD90919D}
{58D9D989-B1F5-4B90-A5D8-D3D3FD90919D}1200×572 126 KB

4

wow let me check, it can be an issue of cache!

5

It does, but it’s odd. Refresh the screen but be sure your mouse is outside the window. Then bring the mouse back over the window and watch it change.

@nadlalinks71,

I’d guess it’s somewhere in the nitroscript because this is what fires when you mouse over the page.

image
image1234×201 20 KB

I’d look in the index but you’ve got js like this in your code. Naming methods like this make it IMPOSSIBLE for someone outside to help you
image

6

thanks a lot i have started to debug, will update soon!