Atelier Theme

Store Design
, ,

Topic summary

A user reports that the hero banner on their Atelier theme homepage appears zoomed and poorly optimized on mobile devices, despite attempting CSS fixes.

Requested Information:

  • Multiple responders ask for the store URL and password (if applicable) to diagnose the specific issue
  • One suggests sharing screenshots to clarify the desired changes

Proposed Solutions:

  1. Search for “Horizon” theme solutions, as Atelier belongs to the Horizon theme family and fixes should be compatible
  2. Create separate hero banners for desktop and mobile, then use CSS media queries to hide each version on the opposite viewport:
    • Hide desktop banner below 749px width
    • Hide mobile banner above 750px width

Status: The discussion remains open, awaiting the original poster to provide store details or confirm whether the CSS solution resolves the mobile optimization issue.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi! I’m using the Atelier theme and I saw that on mobile view the big hero banner (home page) is not optimized at all. It’s staying zoomed.
I tried a few codes, but it didn’t work out right.

Does anyone know how to optimize for mobile version?
Thank you!

1 Like
2

Hi @R.D

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

1 Like
3

Please share your store URL and password (if it is password-protected), so we can provide you with the solution.

4

If you are searching the forum for solutions, also include “horizon” as these solutions should work for Atelier as well because Atelier is a member of Horizon family.

It would also help you you can share screenshots and tell what exactly you want to change.

1 Like
5

You can create another hero banner to add an image for mobile, then add the codes below to the Custom CSS of each section.
For desktop section

@media (max-width: 749px) {
  .hero { display: none; }
}

For mobile section

@media (min-width: 750px) {
  .hero { display: none; }
}

Best regards,
Dan from Ryviu: Product Reviews App

2 Likes
6

Thank you!
I tried it, but it’s still zoomed.

This is how It has to look like on mobile:

mobile2
mobile2422×745 302 KB

The example is from another theme. Screenshot refers to the upper part.
Atelier is on draft.

7

Please share the preview link of Atelier theme so I can check

1 Like
9

You are using the same hero banner section. You must create another section for mobile so you can upload a new image for mobile devices and then add the code following the instructions in my previous message.

10

I said I tried it and the picture is still zoomed (The codes are there now, you can check). I want to use the same banner for both and not to be zoomed how it is on the example pic I gave.
Good news - Atelier just got updated with this exact case - photo for the mobile view :blush: