HELP: How to optimize banner size for desktop and mobile?

Store Design

Topic summary

Optimizing slideshow/banner images for both desktop and mobile in a Shopify store. The site shows images that don’t fit properly and appear differently between desktop and phone; the goal is to display the full image consistently across devices. There’s also a request to add/use different fonts in the announcement bar (top notification bar).

Updates and actions:

  • Helper asked for the store URL and shared an external guide for mobile/desktop banner image handling (mojoin.com). The URL was provided; the user asked how to input the code.
  • Clarification: the user wants the same slideshow images on desktop and mobile, but sized/optimized so they fit well on both (not separate images).
  • Advice given: use the same banner image with all key graphics centered, which should improve cross-device display.

Open items / unresolved:

  • No specific code or theme settings were provided in-thread; the user’s “how to input this code” remains unanswered.
  • The request about uploading/adding different fonts to the announcement bar has not been addressed.

Status: Ongoing; awaiting concrete implementation steps or code guidance.

Summarized with AI on February 28. AI used: gpt-5.
1

My photos are not fitting well on my website and they don’t look the same in the desktop version and the phone version. Can you fix both so the full parts of my image can be seen well? I saw in other threads Shopify experts help people struggling with the same thing but the codes they posted did not work for me. Can someone please help?

Also,

I would like to upload or have different fonts available for my announcement bar. How do i do this?

1 Like
2

@rae6998

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

yes you have try to mobile and desktop banner image below code

https://www.mojoin.com/show-shopify-banner-image/

3

Hi Ketan Kamar,

I hope all is well. I reached out to you on shopify regarding my website.

“My photos are not fitting well on my website and they don’t look the same in the desktop version and the phone version. Can you fix both so the full parts of my image can be seen well? I saw in other threads Shopify experts help people struggling with the same thing but the codes they posted did not work for me. Can someone please help?” The banner on my desktop doesn’t fit and I want to make sure the images fit on both the desktop and mobile

Here is my website url: www.amarasminks.com The password is 1.

Thank you,

Rachael

4

How do I input this code?

1 Like
5

@rae6998

thanks for all details

do you need desktop and mobile different image?

6

Hi,

I am talking about optimizing my slide show for both desktop and mobile!!

7

Hi,

I am talking about optimizing my slide show for both desktop and mobile!! I am wanting to use the same slideshow for desktop and mobile, I just want to have them be different sizes so the slideshow can fit in both mobile and desktop

1 Like
8

@rae6998

yes, please use same banner image but all graphic work at center of than image then it work fine