How to reduce the container for the button on slideshow?

Store Design

Topic summary

Reducing excessive mobile whitespace around a slideshow call-to-action and adjusting the “Shop now” button size/position.

  • Solution provided via theme CSS edits (Online Store > Themes > Edit code > Assets: base.css/style.css/theme.css). Use a mobile media query (max-width: 749px) to update .banner__box padding and set position: absolute; bottom: 30px; with !important to override theme defaults. Outcome: whitespace reduced and layout closer to desktop overlay.

  • Button size on mobile addressed by targeting a.button.button–primary within the same media query, setting padding: 0 1.5rem and min-height: 3.5rem. Outcome: smaller button confirmed by the original requester.

  • A second store with a similar issue received CSS (max-width: 989px) to bottom-center the banner content (position: absolute; bottom: 0) and make the banner box background transparent. Follow-up questions asked if this also yields a small bottom-centered button, and reported the slideshow hidden behind an upper poster on mobile.

  • Access required to diagnose the mobile overlap; the store is password-protected and the password “LS” was provided.

  • Status: First case resolved with CSS changes; second case ongoing pending inspection and further adjustments for mobile slideshow visibility.

Summarized with AI on December 25. AI used: gpt-5.
1

Hi, im trying to reduce the height of the container as its just wasted space as seen below in green. how do i make it be exactly like the same height as the shop now button? my site is combatica.co.uk but this theme is not published yet so can be viewed here https://42tvec657rvjnldl-59424374992.shopifypreview.com

COMBATICAUK_0-1701616807535.png
COMBATICAUK_0-1701616807535.png266Ă—380 51.2 KB

1 Like
2

Hi @COMBATICAUK

Do you want to remove the space only or you like same with the desktop view?

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner__box {
    padding: 0rem 3.5rem;
}
}

My advice:

  • Same Instruction.
@media only screen and (max-width: 749px){
.banner__box {
    padding: 0rem 3.5rem;
    position: absolute;
    bottom: 30px;
}
}

Lesser white space.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi i copied both codes but it didnt work, it just moved the button slightly up as seen below

COMBATICAUK_1-1701671660584.png
COMBATICAUK_1-1701671660584.png270Ă—415 51.4 KB

4

i acutally prefer your idea about having it like desktop view but would also like the shop now button to be a bit smaller when in mobile view

5

@Made4uo-Ribe hi, any other ideas to fix it please?

6

Can you try this code again.

@media only screen and (max-width: 749px){
.banner__box {
    padding: 0rem 3.5rem !important;
    position: absolute !important;
    bottom: 30px !important;
}
}

And Save. If still didnt work, can you share the preview again. The preview expired already. Thanks!

1 Like
7

Nice! that worked perfectly. Final question, do you know how to make the shop now button a little smaller in mobile view only as it takes a lot of space as seen below

COMBATICAUK_0-1701801474331.png
COMBATICAUK_0-1701801474331.png268Ă—349 51.2 KB

8

Yes, I can help but I would need the preview again. Thanks!

1 Like
9

sure thing, here you go https://d5353vc9gbsbvh6s-59424374992.shopifypreview.com

10

Hi did u manage to take a look at tackling this issue?

1 Like
11

oh, this is crazy. I reply this post since yesterday.

Sorry for that Im not sure what is happening but its the 2nd post now. That Ive reply and yet not posted. Please, check this one. Thanks!

Same Instruction.

@media only screen and (max-width: 749px){
a.button.button--primary {
    padding: 0 1.5rem !important;
    min-height: 3.5rem !important;
}
}

And Save.

Result:

Made4uoRibe_0-1701972898394.png
Made4uoRibe_0-1701972898394.png734Ă—479 210 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
12

Man, you’re a legend! Wish i could double like! Please keep an eye out for me if i have issues in the future :slightly_smiling_face:

1 Like
13

Welcome! Yes sure.

14

Hey Made4uo-Ribe can you help me too please coz i m facing the same issue

15

Hi @LisseStitch

Yeahm sure but i would need your store URL. Would you mind to share? Thanks!

16

Sure no problem
Here is my store url - https://ef5850-d3.myshopify.com/

17

Hey Made4uo-Ribe any updates regarding my problem ?

18

Hi,

If i didnt reply for 1-2days you should not wait for me. I missed some of the notification, sorry for that.

Check this one then.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 989px){
.banner__content.banner__content--bottom-center.page-width {
    position: absolute;
    bottom: 0;
}
.banner__box.content-container.content-container--full-width-mobile.color-scheme-5.gradient {
    background: transparent;
}
}

And Save.

Result:

Made4uoRibe_0-1718023581072.png
Made4uoRibe_0-1718023581072.png547Ă—529 177 KB

19

Hi,
Will this reflect a small button in the bottom center for mobile layout as well ?

20

In mobile layout the slideshow is not reflecting and its hidden behind the upper poster .
Can you please have a look ?