Adjusting Image Size on Desktop Version (16:9 Format)

Store Design
, ,

Topic summary

A Shopify store owner uploaded 16:9 format images for footer sections that display well on mobile but appear excessively large on desktop. They’re seeking a CSS solution to reduce desktop image size without affecting mobile display.

Solution Provided:

  • The images are actually in 9:16 portrait orientation (suitable for mobile)
  • A CSS fix targets desktop screens (1024px+) to constrain image width
  • Implementation requires adding custom CSS to theme.liquid file above the tag
  • The code uses a page-specific ID check and sets max-width to 800px (adjustable)
  • Uses modern CSS with :has() selector to target image containers

Implementation Steps:

  1. Navigate to Shopify admin > Online store > Edit code
  2. Locate theme.liquid file
  3. Insert provided CSS code snippet before closing tag

The solution is pending confirmation from the original poster on whether it resolves the issue.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey everyone,

I’ve set up a page on Shopify where I had to work with footers. The images were uploaded in a 16:9 format to ensure they look great on mobile. However, on the desktop version, the images appear way too large.

Is there a way to reduce the image size on the desktop version without affecting how they display on mobile? Maybe via CSS or some other settings?

Thanks a lot for your help!

Check out the page here: https://www.rappid.run/pages/mission

2

Hi @rappid

You are currently using images with a width-to-height ratio of 9:16 (portrait orientation), which is suitable for mobile devices. On desktop, it naturally won’t display in full.

The solution is to reduce the width of desktop. You can adjust the number 800 to a smaller value if desired.

1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
{% if page.id == 159888113990 %}
@media screen and (min-width: 1024px){
h1.main-page-title + .rte > div:has(img) {
    max-width: 800px;
    margin-inline: auto;
}
}
{% endif %}
{% endstyle %}

image (5).png
image (5).png1904×855 334 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.