Help Makeshift button clickable

[MelissaM92]

I have had to make 2 different pictures of my desktop and mobile version of the banner. The original banner that was in the dawn theme had a button already installed on the banner, which I used for Desktop version. I had trouble installing a button for the mobile banner onto the image version so i edited my banner image and created a button on the image. can someone please help me make that button clickable? I need the shop now button for mobile to click onto "all products" page. TIA

moimeme.com.au

Kbf295GhpF113

[MelissaM92]

Can you help with a custom code for it? 

[Small_Task_Help]

Hi,

Need to modify the HTML and CSS for the mobile banner

Open appropriate section file where mobile banner code is located and add Overlay

Code example

<div class="mobile-banner">
  <img src="{{ 'your-mobile-banner-image-url-here' | asset_url }}" alt="Banner Image" class="mobile-banner-image">
  <a href="/collections/all" class="mobile-banner-button-link"></a>
</div>

Add CSS for the clickable button overlay
Code example

.mobile-banner {
    position: relative;
    display: inline-block;
}

.mobile-banner-image {
    width: 100%;
    height: auto;
}

.mobile-banner-button-link {
    position: absolute;
    top: 50%; /* Adjust this value based on the location of your button in the image */
    left: 50%; /* Adjust this value based on the location of your button in the image */
    transform: translate(-50%, -50%);
    width: 200px; /* Adjust width to match the button size */
    height: 50px;  /* Adjust height to match the button size */
    display: block;
    z-index: 10;
}

Adjust the Overlay Position

[MelissaM92]

Hi thanks for your reply. could you help with a custom code?