Home page image aspect ratio

[Roger]

I wonder if someone would be able to point me in the right direction on this issue.

I have a map of Spain as my home page image https://www.sorbaskarst.com/gts/
This looks OK when viewed on a desktop monitor but when viewed on a mobile device it is horizontally compressed.

Do I need two different images? Do I heed to change some html? Where should I start?

[bsmither]

Please check in the Homepage document, where you have the code for the image "cart-image.webp".

There may be assigned a width and height value in a style attribute.

Remove those values. (Those values remind me of the sizes used by the BXSlider. But here, the BXSlider is not being used.)

 

Edited August 26 by bsmither

[Roger]

"Please check in the Homepage document" - sorry to be dense but which file am I looking for? Is it index.php? as I cannot see a ref to "cart.image.webp" in there

[bsmither]

I corrected the filename in my post above.

In CubeCart's admin, Documents, click the Edit icon for the row that has the Homepage column checked.

On the next page, click the Content tab. Click the editor's Source button.

Viewing the source code of the document, find:

<p><img alt="" src="/gts/images/source/cart-image.webp" style="width:1000px;height:300px;"></p>

Change to:

<p><img alt="" src="/gts/images/source/cart-image.webp"></p>

Save and have CubeCart clear its internal cache.

[Roger]

Brilliant, thanks for your time.