Re: black block behind button in mobile

Solved

black block behind button in mobile

patriciaatr
Tourist
6 0 2

hello,

I would like to have button label in mobile like I have in desktop version.

can please someone help me? thank you very muchCaptura de ecrã 2024-09-11, às 11.36.18.pngCaptura de ecrã 2024-09-11, às 11.36.27.png

Accepted Solution (1)
Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .banner__box.content-container.gradient {
          background: transparent !important;
   }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

View solution in original post

Replies 12 (12)

BSSCommerce-HDL
Shopify Partner
2305 833 906

Hi @patriciaatrCan you kindly share your store link with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

patriciaatr
Tourist
6 0 2

Tech_Coding
Shopify Partner
384 106 90

Hello @patriciaatr 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
patriciaatr
Tourist
6 0 2
Tech_Coding
Shopify Partner
384 106 90

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .banner__buttons a {
      background: transparent !important;
    }
    .banner__buttons {
       background: transparent !important;
    }
    .banner__content.banner__content--bottom-center.page-width.scroll-trigger.animate--slide-in {
        position: absolute !important;
         bottom: 0;
     }
}
</style>

Tech_Coding_1-1726052745156.png

 

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
patriciaatr
Tourist
6 0 2

Captura de ecrã 2024-09-11, às 13.44.36.png

hello, thank you for you help

in fact, is above the image but it still has a black block 😞 

Tech_Coding
Shopify Partner
384 106 90

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .banner__box.content-container.gradient {
          background: transparent !important;
   }
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
patriciaatr
Tourist
6 0 2

thanks! that worked! may I ask why just has worked in "shop now" button but "contact us" bellow hasn't? 

BSSCommerce-HDL
Shopify Partner
2305 833 906

Hi @patriciaatr

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

 

<style>
@media only screen and (max-width: 767px){ 
 #shopify-section-template--22763499684177__image_banner_peEqR9 .banner.banner--content-align-center {
    position: relative;
}

#shopify-section-template--22763499684177__image_banner_peEqR9 .banner__content.banner__content--middle-center.page-width {
    position: absolute;
    bottom: 0;
    
}

#shopify-section-template--22763499684177__image_banner_peEqR9 .banner__buttons a {
   color: #ffff !important;
}
}
</style>

Here is result: 

BSSCommerceHDL_0-1726067239435.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

 

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Tech_Coding
Shopify Partner
384 106 90

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
  .banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
     position: absolute;
     bottom: 0;
   }
   .banner__buttons a {
       color: #fff !important;
    }
}
</style>

Tech_Coding_0-1726067099128.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

 

I notice one thing more in your store that on your contact page send button text and background color is white , you can add this code to make background color black of he button

Before:

Tech_Coding_1-1726067246308.png

 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .contact__button button.button {
      background: #000 !important;
   }
</style>

After:

Tech_Coding_2-1726067283310.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

Rahul_dhiman
Shopify Partner
610 120 121

Hello @patriciaatr 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-image-banner
add this code at the end of the file.

@media screen and (max-width: 749px) {
.banner__content.banner__content--bottom-center.page-width.scroll-trigger.animate--slide-in {
position: absolute;
bottom: 0;
}
.banner--mobile-bottom .banner__box {
background: transparent;
}

result
6.png

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
patriciaatr
Tourist
6 0 2

hello, thank you so much for you help. may i ask you if you know how to put the button black in transparent blackground? having just the white border and text border? and by the way, do you know why it just apply to "shop now" button but on "contact us" beside it still the same black block?