Slideshow Banner Image Too Small On Mobile

Store Design

Topic summary

Slideshow banner image appears very small on mobile while remaining acceptable on desktop; user seeks a mobile-only adjustment without affecting desktop.

  • Store URL provided: hydrafitco.com.
  • Proposed fix: add CSS in the theme’s base.css within a mobile media query (max-width: 749px) to increase the banner’s visible area by adjusting the banner text container’s margin and the slideshow text wrapper’s height.
  • Result: user confirms the mobile banner looks correct and the heading/button are centered.

Further request:

  • User asks to move the heading and button to the bottom center of the image.
  • Follow-up suggestion: add additional mobile-only CSS to shift the banner content lower by modifying bottom margin.

Status:

  • Primary issue (mobile banner size) resolved.
  • Fine-tuning of content position is underway; final confirmation on the bottom-centering change not yet provided.

Notes:

  • Approach relies on CSS media queries (rules applied only to screens under 749px width).
  • Images illustrate the size difference, but the solution is implemented via CSS changes.
Summarized with AI on February 13. AI used: gpt-5.
1

Hello,

I am trying to have my slideshow banner image apear larger on mobile, but stay the same size on desktop. i am trouble searching for code to help fix this.

On Desktop below it is good and takes up most of the page

ZackL_0-1658453679567.png
ZackL_0-1658453679567.png400×224 105 KB

But then on mobile it is very small

ZackL_1-1658453679529.png
ZackL_1-1658453679529.png185×400 49.6 KB

thanks in advance for the help

2

hi @ZackL ,

Can you please give the url of store, so then i will check and provide the solution for you, thank you!

3

@ZackL

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.

4

Awesome thanks so much!

URL: www.hydrafitco.com

5

Hey Ketan, thanks so much! Here is the URL

www.hydrafitco.com

6

Hi @ZackL

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css->paste below code in bottom of file

@media screen and (max-width: 749px)

.banner:not(.banner–mobile-bottom):not(.email-signup-banner) .banner__box {

margin-top: 100px !important;

}

.slideshow:not(.banner–mobile-bottom) .slideshow__text-wrapper {

height: 300px !important;

}

It will look like this: https://prnt.sc/5jUH5XhextR2

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

7

Hey Richard! This work perfectly! The heading and the button are now in the center of the image, would you be able to help me shift them to the bottom center of the image?

8

Hi @ZackL
I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can add this code to the header and the image can be moved to the bottom of the image.

@media screen and (max-width: 749px)

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box { margin-bottom: -30px !important; } Hope it is useful for you. If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions. Best regards, Richard | PageFly