Change mobile device image ratio to 16:9

Store Design

Topic summary

Goal: prevent mobile cropping by displaying hero images at a 16:9 aspect ratio on a Shopify theme. The store owner prefers the full image to show rather than be slightly cropped and asks if this can be done via the theme’s custom CSS field.

Access update: the site was initially password-protected; the password has been removed so others can review the live store. The store URL was shared for inspection.

Scope clarification: the specific element is the top hero/banner image labeled “your best self.” A helper posted a screenshot to confirm the target section before suggesting changes. Images and screenshots are central to understanding the cropping issue.

Technical context: “aspect ratio” refers to the width-to-height relationship (16:9). CSS (Cascading Style Sheets) would be the likely method to control image sizing and cropping behavior.

Status: no code solution or theme setting has been provided yet. The request remains open, awaiting concrete CSS guidance or theme-specific instructions to enforce a 16:9 display on mobile.

Summarized with AI on December 25. AI used: gpt-5.
1

Hello,

I am seeking some help with alterations to my shopify project. I am using a theme which I purchased off the internet and I would like to adjust the aspect ratio for mobile device to 16:9. I do not understand code so I will need some assistance.

I will attach an image for referece.

When I upload images they are slightly cropped on mobile divices. I would like the whole image to display without this slight crop. I believe it must be done in the code. There is a section as seen in the image, which is for customer CSS so I wonder if this is the answer?

https://huumyoga.com/

Slightly too narrow for 169 on mobile device. Needs adjusting.jpg
Slightly too narrow for 169 on mobile device. Needs adjusting.jpg1920×1080 132 KB

2

@CYON , can you give me password to access your page.

3

Hey @BSSCommerce-TA , I have taken the password off so you are able to view it now. Cheers

4

@CYON , do you mean:

BSSCommerceTA_0-1720425467689.png
BSSCommerceTA_0-1720425467689.png381×832 388 KB

5

I just made some adjustments earlier, but i mean the top image “your best self”. notice how the image is cropped. I would like to change it to a 16:9 aspect ratio, to fit the image nicely . cheers