Adjusting call to action button position on hero slider

Store Design
, ,

Topic summary

A user is trying to center a call-to-action button on their homepage hero slider using a premium theme called “Bookmax” from ThemeForest. The theme creator is unresponsive, prompting the user to seek community help.

Primary Issue:

  • The button appears slightly off-center to the right instead of bottom-center on the slider
  • Multiple CSS solutions successfully centered the button on desktop view
  • However, all initial solutions failed to work on mobile view

Solutions Provided:
Several community members (ExpertRookie, KetanKumar, PageFly-Richard, Litos, GemPages) offered CSS code snippets to add to dt-framework.css, dt-custom.css, or theme.liquid files. Common approaches included:

  • Removing transform properties
  • Adjusting margins
  • Using flexbox justify-content properties

Resolution:
After multiple iterations, Litos provided a mobile-specific CSS solution using a media query (@media screen and (max-width: 576px)) with justify-content: flex-end. The user confirmed this final solution worked, resolving both desktop and mobile alignment issues.

Status: Resolved - button now properly centered on both desktop and mobile views.

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

Have a “E-Book” call to action button on the homepage slider section.

Issue 1: Need to Center a button on hero slider.
I have tried everything i could think of to get this button to align to the bottom center (see screenshot below) of the screen.
No luck, it just shows up slightly off center to the right of the centerline of my page. It’s driving me up a wall trying to fix this.

I’m using a premium theme from www.themeforest.net, it’s called “Bookmax”
The theme creator is not being responsive or providing any support whatsoever.

Reaching out here in the community for a coding solution.
Thanks in advance for reading this.

move.JPG
move.JPG1798×891 109 KB

My store url is: www.basedtradegear.com

1 Like
2

Hi @ChadlyGains
You can try follow this path:
Themes => edit code => asset => dt-framework.css
and add this code to bottom of the file dt-framework.css

.slider-content > div {
transform: translate(0)!important;
}
3

@ChadlyGains

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/dt-framework.css ->paste below code at the bottom of the file.
.home-slideshow-section .slide_1 {
    transform: none !important;
    margin: 0 auto !important;
}

yes, please try this code

KetanKumar_0-1668394109564.png
KetanKumar_0-1668394109564.png1898×942 209 KB

4

Hi @ChadlyGains

I’m Richard Nguyen - CRO Expert at PageFly, I’d like to suggest this idea:

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

#shopify-section-template--16804100604219__16484715585d0b75d2.home-slideshow-section .custom-slide-show .dt-sc-swiper-slider .swiper-wrapper .slider-content *[class*="slide_"] { transform: none !important; -webkit-transform: none !important; } #shopify-section-template--16804100604219__16484715585d0b75d2.home-slideshow-section .dt-sc-swiper-slider .swiper-wrapper .slider-content *[class*="slide_"] { margin-bottom: 0 !important; }

Please refer to this screenshot:

RichardNguyen_0-1668394808490.png
RichardNguyen_0-1668394808490.png1365×651 47.6 KB

Hope you find my answer helpful!

Best regards,

Richard | PageFly

5

Hi @ChadlyGains ,

Go to Assets > dt-custom.css and paste this at the bottom of the file:

.home-slideshow-section .custom-slide-show .slide_1 {
  transform: none !important;
}

Hope it helps!

6

Hello @ChadlyGains

I would like to give you some recommendations to support you

  1. Go to Online Store->Theme->Edit code

  2. Open your theme.liquid theme file

  3. Paste below code before :

Hope my recommendation can work and support you!
Kind & Best regards!
GemPages

1 Like
7

Thank you very much for your suggestion. It worked on desktop but not mobile view.

8

Hello @ChadlyGains

Let’s try using this new code:
1 Like
9

Thanks, most of these suggestions are working on desktop, but for some reason not the mobile view.

10

Thanks Ketan, this worked for desktop but not for mobile. Any thoughts?

Appreciated,

J.

1 Like
11

Thanks Richard. That worked on desktop, now just trying to figure out how to get the change to reflect on the mobile view as well.

12

Thanks Litos, these are all working really well on desktop. Appreciate it. Any way to get these changes to reflect on the mobile view?

J.

13

Hi GemPages, I tried the new code but still just desktop and no mobile.
Open to any further suggestions, appreciate your time in responding to my issue!

J.

14

@ChadlyGains

yes, please add this code

#shopify-section-template--16804100604219__16484715585d0b75d2.home-slideshow-section .dt-sc-swiper-slider .swiper-wrapper .slider-content[class*="bottom-"] [class*="slide_"] {
    justify-content: flex-end !important;
}
1 Like
15

Hi @ChadlyGains ,

Go to Assets > dt-custom.css and paste this at the bottom of the file:

@media screen and (max-width: 576px) {
  .home-slideshow-section .custom-slide-show .slide_1 {
        justify-content: flex-end !important;
  }
}

Hope it helps!

1 Like
16

Thanks for being so responsive. I ended up fixing it with Litos’ suggestion.

2 Likes
17

@ChadlyGains

great thanks for update