Centering a call-to-action button relative to an image

Technical Q&A
1

Hello everyone!

I am trying to center my call-to-action button relative to a GIF I have on the homepage of my website

I tried using relative positioning to have both gifs more or less in the center of the image, but the problem is different screen resolutions see the positioning of the call-to-action button differently, and therefore, it isn’t positioned in the center of the image.

Could anyone give me any insight into how I’d go about positioning a call-to-action in the center of my GIF?

In this case, the GIF is called .custom__block-image

How can I have my call-to-action buttons (called .button, .button2) “inherit” the .custom-block-image positioning and center them therein.

This is how somebody else sees them
This is how somebody else sees them1600×900 137 KB

This is how I see the buttons (using relative positioning)
This is how I see the buttons (using relative positioning)1280×820 81.9 KB

Any advice would be highly appreciated!

2

This varies wildly by theme and structure. Without providing sample code or url your making it next to impossible for anyone to help you.

In general use CSS grid , or read up on centering in css https://css-tricks.com/centering-css-complete-guide/

Goodluck.

3

Hey Paul, I am using the debut theme, here is the URL to my store, any help would be greatly appreciated.

https://www.baldiwear.com/

As I said, I want to center the ACTIVEWEAR button, and the BEACHWEAR button, such that regardless of the screen resolution they are in centered.

Here is code I currently have, though here it is using absolute positioning (as I was trying a different technique, but the idea is the same, I want both buttons to be in the center of their respective GIFS.)

.button {
background-color: #fff; /* fallback /
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; / fallback */
border-color: rgba(255, 255, 255, 0.4);
display: inline-block;
position: absolute;
transform: translate(-50%,-50%);
margin-right: -50%;
top: 70%;
left: 67%;
width: 400px;
height: 80px;
padding: 8px;
color: white;
font-family: ‘ITC Avant Garde Gothic’;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
border: 2px solid whitesmoke;
border-radius: 10px;
text-align: center;
line-height: 65px;
outline: none;
text-decoration: none;
transition: background-color 0.5s ease-out, color 0.5s ease-out;
}

.button:active {
font-weight: $font-weight-bold;
}

.button2 {
background-color: #fff; /* fallback /
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; / fallback */
border-color: rgba(255, 255, 255, 0.4);
display: inline-block;
position: absolute;
transform: translate(-50%,-50%);
margin-right: -50%;
top: 70%;
left: 33%;
width: 400px;
height: 80px;
padding: 8px;
color: white;
font-family: ‘ITC Avant Garde Gothic’;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
border: 2px solid whitesmoke;
border-radius: 10px;
text-align: center;
line-height: 65px;
outline: none;
text-decoration: none;
transition: background-color 0.5s ease-out, color 0.5s ease-out;
}

.button2:active {
font-weight: $font-weight-bold;
}

4

If you need to buy this customization contact me at paull.newton+shopifyforums@gmail.com

The first issue is the buttons are not even in the same element hierarchy as the images, so the absolution positioning will be relative to the next relevant parent element.

I’m not sure how your getting to this result beside maybe adding completely unrelated sections and trying to fix the issue that causes with only CSS, see screenshot.

If so that isn’t the right approach or able to be fixed simply.

If your using custom html you need to combine them into a clean related structure.

If your following a tutorial you may want to reread it and link it here for reference.

There are also many many posts on “debut theme image with buttons” available

https://community.shopify.com/c/forums/searchpage/tab/message?advanced=false&allow_punctuation=true&filter=location&location=category:en&q=debut%20theme%20image%20with%20buttons

PaulNewton_0-1632805835229.png
PaulNewton_0-1632805835229.png1319×495 310 KB

5

Hey Paul,

What you’re saying makes a lot of sense, would you mind pointing me in the right direction? I don’t see any HTML files in the codebase of the project. I don’t expect you to spoonfeed me a solution, but if you can at least tell me what steps I would need to take so I can go about approaching this correctly.

The GIFs I added were using Shopify’s “customize” option, and the call-to-action buttons I added were using https://www.shopify.com/partners/blog/building-a-clickable-call-to-action-button-for-your-shopify-theme this tutorial.

How do I go about setting the hierarchical structure using Shopify’s code editor?

Any help you can provide me with would be highly appreciated, thanks again Paul.

6

Note also the latest debut theme does have a premade gallery section.

So a design hack is to just cheat by photoshopping the button into the image and and adding a link to the setting.

So the whole image is a link but it looks like a button.

7

I would do this but I have custom effects on selectors (e.g button:active, button:hover) so the photoshop trick wouldn’t actually work from what I’m trying to do.

I do understand what you’re saying about having to structure it with HTML, where I’d have a

a button within that div and then using .image_name .button to manipulate the element within the parent structure, however, the default way it’s structured doesn’t allow me to do that so I don’t know where to edit the HTML so it does…

I tried: .custom__block-image-container .button {

//center it here

}

Though I assumed this wouldn’t work because the “button” code isn’t within the parent div class.