black block behind button in mobile

[patriciaatr]

hello,

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

can please someone help me? thank you very much

[BSSCommerce-HDL]

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

[patriciaatr]

https://mano-classics.com

pw: MANO

[Tech_Coding]

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.

[patriciaatr]

https://mano-classics.com

pw: MANO

[Tech_Coding]

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>

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

[patriciaatr]

hello, thank you for you help

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

[Tech_Coding · 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.

[patriciaatr]

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

[BSSCommerce-HDL]

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: 

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  😍

[Tech_Coding]

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>

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:

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:

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

[Rahul_dhiman]

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

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

[patriciaatr]

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?