Can someone help me place the Discover button on my image banner under my text?

[Malakush]

Can someone help me move the button to the red box area as can be seen in the image below? 

Many Thanks! 

Website: arcanepcb.com

Pass: sewsog

[BSSCommerce-HDL]

Hi @Malakush, 

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) {

.banner__buttons {
    position: absolute !important;
    left: 31%;
    top: -245%;
}

.banner__content.banner__content--bottom-left {
    margin: 0 !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  😍

[Malakush]

Hi @BSSCommerce-HDL - Didn't work for some reason. I took a screenshot below. Any thoughts? I must be doing something wrong. 

[BSSCommerce-HDL]

@Malakush, Pls replace old code to new code: 

<style>
@media only screen and (min-width: 768px) {

.banner__buttons {
    position: absolute !important;
    left: 31%;
    top: -245%;
}

.banner__content.banner__content--bottom-left {
    margin: 0 !important;
}
}
</style>

[Malakush]

Not sure what code i need to replace. I can't find anything similar. 

Kindly make a mark on the attached documents where i need to replace the code. 

[BSSCommerce-HDL]

@Malakush, Pls insert this code above <head/> 😍

<style>
@media only screen and (min-width: 768px) {

.banner__buttons {
    position: absolute !important;
    left: 31%;
    top: -245%;
}

.banner__content.banner__content--bottom-left {
    margin: 0 !important;
}
}
</style>

[Malakush]

1) That's exactly what i did. I sent you a photo 2 messages ago showing you exactly that.

2) Then you told me to replace code.

3) And now you're telling me to put it above <head/> which is different to </head> (as written in your first message). 

[BSSCommerce-HDL]

@Malakush. Sorry, I wrote a little mistake

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 (min-width: 768px) {

.banner__buttons {
    position: absolute !important;
    left: 31%;
    top: -245%;
}

.banner__content.banner__content--bottom-left {
    margin: 0 !important;
}
}
</style>

Hope this can help you 

[Malakush]

The good news is it's in the correct area, the bad news the button is moving as i make the window larger/smaller. Is there any way to keep it static? Is it related to the image itself? 

Thank  you. 

[BSS-TekLabs]

- Here is the solution for you @Malakush 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media screen and (min-width: 750px) {
    .banner--desktop-transparent .banner__box {
        justify-content: left !important;
        display: flex !important;
        margin-left: -60px !important;
        top: -120px !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Malakush]

Can you make the button static? It's moving around the image. Thanks!

[BSS-TekLabs]

I see you added an incorrect code. Please check the code you added.

[Malakush]

Removed already thanks. 

[Malakush]

Any idea how to make the button stay in place? Moves around as the page enlarges/minimises. 

[BSS-TekLabs]

<style>
@media only screen and (min-width: 750px) {
.banner__content a.button.button--secondary {
    position: absolute !important;
    bottom: -86px !important;
    left: 0px !important;
}
}
</style>

Can you try this code @Malakush 

[Malakush]

I changed the bottom to 150px and it's in position, but as soon as i adjust the size of the window it moves to a different location. The concern is people have different monitor sizes. What may be ok for me may not be ok for them. 

[Tech_Coding]

Hello @Malakush 

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(min-width: 990px){
  .banner__buttons {
     position: absolute;
     top: -101px;
     left: 11px;
      margin-top: 0 !important;
  }
  .banner__content.banner__content--bottom-left.page-width.scroll-trigger.animate--slide-in {
      position: relative;
   }
}
</style>

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

[Malakush]

Didn't work 😞

[Malakush]

As you can see, the button moves around depending on the size of the monitor. Is there any way to make the button static? 

[Sangeetanahar]

hello @Malakush 

Go to online store ----> themes ----> actions ----> edit code ---->assets ----> sewction-image-banner.css...>
add the code end of the file

@media only screen and (min-width: 767px) {

.banner__buttons {
    position: absolute;
    left: -212px;
   
    bottom: 197px;
}
}

Buy me a Pizza

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