Align slideshow content on impulse theme for mobile sizes

Store Design
, , ,

Topic summary

Goal: Align slideshow banner content in the Impulse theme on mobile so text is top-aligned and centered; desktop already appears as desired. Images were shared to illustrate the target layouts for both desktop and mobile.

Current CSS: A media query (max-width: 1200px) centers .animation-contents, adjusts .btn sizing and spacing, and sets h2 margin to auto. Despite this, the mobile content still isn’t positioned at the top/center as intended.

Additional request: Insert a manual line break in the heading text (a
), on both desktop and mobile. Here “breakpoint” refers to a line break in copy, not a responsive media query. The helper confirmed this can be added in the content dashboard.

Actions/updates: The store URL (vitamiracle.com) was provided. The helper shared a mockup of the expected mobile result and offered to implement the fix for free if added as staff. The requester sent a direct message to proceed.

Status: Moving offline for implementation; no public, step-by-step CSS/HTML solution posted yet. Outcome pending and the thread remains open without a documented resolution.

Summarized with AI on January 9. AI used: gpt-5.
1

Hi, I’m having issues positioning the slideshow content on the banner on impulse theme for mobile version.

I want the slideshow to look like this on Desktop (this one is showing ok).

DFU98_0-1703712168327.png
DFU98_0-1703712168327.png1920×1080 371 KB

But for mobile version I want the slideshow to look like this and have the text aligned.

DFU98_1-1703712234997.jpeg
DFU98_1-1703712234997.jpeg793×1600 70 KB

but I’m having issues with that part, I need the content to be on top and centered on the slideshow on mobile version.

This is the CSS I have right now

.btn {
  color: #183170 !important;
  padding: 1rem;
  padding-left: 3rem;
  padding-right: 3rem;
  font-size: 25px;
}
@media only screen and (max-width: 1200px) {
  .animation-contents {
    text-align: center;
    display: block;
  }
  .btn {
    display: block;
    color: #183170 !important;
    padding: 0.5rem;
    padding-left: 0.1rem;
    padding-right: 0.1em;
    font-size: 15px;
  }
  h2 {
    margin: 0 auto;
  }
}

Help would be appreciated.

1 Like
2

Hi @DFU98

I understand what you want to do. Can you please provide your store URL, so that I can provide you a solution that can work for your store?

Yoo

Shishir Hasan | Shopify Developer

3

The link of the store is vitamiracle.com

Really appreciate your help @ShishirHelps .

4

Hi @DFU98

Do you want it like this?

ShishirHelps_0-1703716406791.png
ShishirHelps_0-1703716406791.png1476×907 178 KB

Give me a message and add me as a staff on your dashboard. I will make it for free.

Yoo

Shishir Hasan | Shopify Developer

5

Yeah, Also forgot to place in the question is there a way to do a Breakpoint in the text?

DFU98_2-1703716862602.jpeg
DFU98_2-1703716862602.jpeg1500×2058 164 KB

I would like the text to look like that. As you can see there is a BR that I would like to have if possible in both, Desktop and mobile. Is there a way to do that too @ShishirHelps ?

6

Hi @DFU98

Yes, you can add a break point on your content dashboard.

1 Like
7

Already sent a DM @ShishirHelps

1 Like