Remove white button border on Image banner & change position

Store Design

Topic summary

A user encountered two styling issues with a button on their Shopify image banner: an unwanted white background appearing around the button, and difficulty positioning the button lower on mobile devices.

Desktop Issue - White Background:

  • Two solutions were provided involving CSS code
  • Both required adding custom CSS to either theme.liquid or base.css files
  • The white background was successfully removed after clearing cache

Mobile Issue - Button Positioning:

  • The button needed to be repositioned lower on mobile view
  • Solution involved adding media query CSS to base.css targeting screens under 749px width
  • Code adjusted the banner content alignment to flex-end

Resolution:
Both issues were resolved through custom CSS additions. The user confirmed all problems were fixed after implementing the provided code snippets in the appropriate theme files.

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

I am trying to add a button to my image banner but it comes up with a big white background.

I have tried adding code into CCS as seen on other suggestions but with no effect.

I also would like to be able to bring the button down lower (in mobile version) on the image.

Screenshot 2025-01-04 071323.png
Screenshot 2025-01-04 071323.png646×670 425 KB

Screenshot 2025-01-04 071212.png
Screenshot 2025-01-04 071212.png1896×634 262 KB

1 Like
2

Hello @bloomhome
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

3

@bloomhome Can you please share this page link?

4

https://qcg96d-rp.myshopify.com/

1 Like
5

My website link up here

6
  • Here is the solution for you @bloomhome
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • This is the result you will get:

BSSTekLabs_0-1735962702473.png
BSSTekLabs_0-1735962702473.png1893×875 323 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
7

@bloomhome -

please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.banner--mobile-bottom .banner__box {background: none !important; padding-bottom:0 !important}
1 Like
8

thanks the desktop problem solved the mobile problem remains

1 Like
9

added but not working

Screenshot 2025-01-04 080510.png
Screenshot 2025-01-04 080510.png1743×934 116 KB

10

@bloomhome please clear cache and check, it is working at my end

suyash1_0-1735963737550.png
suyash1_0-1735963737550.png1366×768 230 KB

1 Like
11

thanks this one worked but the mobile problem remains

Screenshot 2025-01-04 071323.png
Screenshot 2025-01-04 071323.png646×670 425 KB

12
1 Like
13

please try this code @bloomhome

BSSTekLabs_0-1735964042013.png
BSSTekLabs_0-1735964042013.png381×787 284 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
14

@bloomhome - for mobile add this

@media screen and (max-width:749px){
.banner__content{align-items: flex-end;}
}
15

where do i put this code ??

1 Like
16

where ??

17

@bloomhome end of base.css file

18
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
1 Like
19

thanks all done :+1:

1 Like
20

Glad to be of help. Have a nice day.