Keep button on image banner sized relative to text

Airri
Excursionist
22 0 4

I've created some image banners within canva to have a button over them. However, the button adjusts in size depending on the webpage size and this causes the button to move over the text. How do I keep the button size to be relative to the text on the image banner? 

 

airrishop.myshopify.com

Airri Shop

Screenshot 2024-05-16 001830.png

In the picture above the yellow button needs to be where the red x is. 

 

Screenshot 2024-05-16 000759.png

What it should always look like.

 

Screenshot 2024-05-16 000824.png

Another example of a bad button placement due to webpage resizing.

Replies 13 (13)

Arif_Shopidevs
Shopify Partner
133 18 13

hi, @Airri 
can you share your store password. we are unable to view.
thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
133 18 13

From my suggestin you can crate the left side with image and then insert the top part and text and button and then  button part with image. This will easy for management.
Other wise, it need to write the js. which will measure the image width , the button position and depending of the current view port, it will recalculate the button position which is a tricky task.
thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Airri
Excursionist
22 0 4

@Arif_Shopidevs wrote:

From my suggestin you can crate the left side with image and then insert the top part and text and button and then  button part with image. This will easy for management.


Hello,

 

Could you explain this? I'm not understanding, but I'm open to any solution. Is there an example you could show? 

 

Airri
Excursionist
22 0 4

airrishop.myshopify.com

password: Airri Shop

Arif_Shopidevs
Shopify Partner
133 18 13

Hi @Airri 

I have create a sample for you, with your image and a button you can check this solution may work. Here when you change the window position the button position also changed. it is done using javascript.

Second solution is
1. part 1 image left side
2. part 2 right side top
3. part 3 left side bottom
4. Insert a button using HTML with this three image like
img 1 (left)
(img 3 left)
(img 2 right)
button middle of them using HTML css

Thank you
thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
133 18 13

Here is the code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Button Position</title>
<style>
  .container {
    position: relative;
    width: 100%;
    max-width: 1723px; /* Set the max width to the original image size */
    margin: 0 auto;
  }

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

  .button {
    position: absolute;
    top: 330px; /* Initial position when image is at its full size */
    left: 915px; /* Initial position when image is at its full size */
    transform: translate(-50%, -50%); /* Adjust to center the button */
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }

  @media (max-width: 1723px) {
    /* Optional CSS for dynamic adjustment */
    .button {
      /* Use calc to adjust the position based on percentage */
      top: calc(330px / 1723 * 100%);
      left: calc(915px / 1723 * 100%);
    }
  }
</style>
</head>
<body>

<div class="container">
  <img src="https://airrisupplements.com/cdn/shop/files/Marketing_Card_9689b56f-2fc1-4855-972c-e25ed2a85722.png?v=1715916415&width=3840" alt="Marketing Card" class="responsive-image">
  <button class="button">Click Me</button>
</div>

<!-- Optional JavaScript for better responsiveness -->
<script>
  const container = document.querySelector('.container');
  const button = document.querySelector('.button');
  const image = document.querySelector('.responsive-image');

  function adjustButtonPosition() {
    const imgWidth = image.clientWidth;
    const imgHeight = image.clientHeight;

    const originalImgWidth = 1723;
    const originalImgHeight = 861.5;

    const buttonOriginalX = 1300;
    const buttonOriginalY = 670;

    const newButtonX = (buttonOriginalX / originalImgWidth) * imgWidth;
    const newButtonY = (buttonOriginalY / originalImgHeight) * imgHeight;

    button.style.left = `${newButtonX}px`;
    button.style.top = `${newButtonY}px`;
  }

  window.addEventListener('resize', adjustButtonPosition);
  window.addEventListener('load', adjustButtonPosition);
</script>

</body>
</html>
Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Airri
Excursionist
22 0 4

I added this code but it removed all my buttons. I am a complete novice at coding so I may have entered it in the wrong place. 

Arif_Shopidevs
Shopify Partner
133 18 13

Hello, Please remove those code and give me your original image. I will guide you how to insert in shopify section. so that it will easy for you.

I gave you a sample.
Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Airri
Excursionist
22 0 4

Marketing Card.png

Arif_Shopidevs
Shopify Partner
133 18 13

Are using dawn theme.

Your other section has button inside image.

If you add button same like that banner it will easy for code.

Right now you create two section one for image another for button.

Inside same section image and button will help to position the content.

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Airri
Excursionist
22 0 4

I'm using Refresh theme, but I just made a change to keep the button in a separate image banner. I thought of a work around. I originally had the button and image together. I'd be willing to change it back if the responsive image banner can be made fairly easy, but if it's too complicated I'm okay leaving as is.  

Arif_Shopidevs
Shopify Partner
133 18 13

In refresh theme which section you used image or image with banner etc. I will reproduce that for you and will try to describe easier way.

 

Thank you 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Airri
Excursionist
22 0 4

I used "image banner" inside the template.