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?
Airri Shop
In the picture above the yellow button needs to be where the red x is.
What it should always look like.
Another example of a bad button placement due to webpage resizing.
hi, @Airri
can you share your store password. we are unable to view.
thank you
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
password: Airri Shop
Hello,
Could you explain this? I’m not understanding, but I’m open to any solution. Is there an example you could show?
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
Thank you
thank you
Here is the code
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.
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
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.
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.
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
I used “image banner” inside the template.
