Images Look Right in Cornerstone But Not on Live Site

[intercomputer]

Title says it all. Not sure why it’s working in one mode but not the other. It’s used it two places on the page, too. Both are not displaying correctly (it’s shrinking down the image to a very small size on the live page).

[paul.r]

Hi,

Yes, please provide us your wordpress admin login as well so we can compare.

For the mean time, you can try setting the width of your image element to 100% then add a max width.

Hope that helps

[intercomputer]

Added details in secure note. I’ll try this now.

[paul.r]

Hi,

I checked and it seems to look the same on my end.

In Cornerstone

In Frontend

Please try adding a width and max-width as suggested.

Thanks

[intercomputer]

Hi @paul.r I did try it just now. It’s not yet accomplishing what it needs to. In the frontend screenshot you posted, the image is only a fraction of the HEIGHT it needs to be. WIDTH-wise, it looks fine. But it’s cutting off the height from what it looks like in Cornerstone. Please advise. Thanks.

[nabeel]

Hi again,

I inspected your images both in Cornerstone and on the front-end and both are exactly the same. In Cornerstone the preview window is smaller than the actual screen size due to the controls on the left panel. You can pop the controls window out and then compare those images with the front-end (see screenshot)

The image resizes based on the screen size due to it’s responsive behavior defined in the image settings.

Hope this helps!

[intercomputer]

@nabeelkhan, For me, for some reason, it’s still not showing correctly. This behavior where the image height is shrunken from what it’s supposed to be (and what it shows in Cornerstone) happens on multiple browsers on multiple computers.

Here’s what it looks like to me. It’s not due to the controls sidebar/pop out in Cornerstone. It’s what I am seeing on the live site.

This is what it looks like on live site:

The image we’re referring to is this one:

[ruenel]

Hello @intercomputer,

Thank you for the clarifications. In the Cornerstone preview, empty columns will have a placeholder. When this empty columns is viewed in the live view, it will display shorter because it only depends on the height of the contents of the column. To resolve your issue, please insert a gap element in the columns or simply edit the column settings, find the “Customize” tab and insert this inline element css to set a minimum height for the columns:

$el {
   min-height: 250px;
}

And lastly, in the row settings, please disable the “Marginless Column” option.

I went ahead and resolve the issue myself. Please check your page now.