Re: Banner content positioning

Solved

Banner content positioning

AvyCoffee
Excursionist
23 0 7

I am trying to properly align my image banner button. When editing through "customize", it's in the right position. But when I go to my website, the button is at the bottom of my banner. See photos attached.

 

Can someone please direct me where to go to fix this?

 

Also, I have to put a container on the button for mobile because I can't seem to figure out how to make it look the same as desktop. If this isn't possible to fix, that's fine.

 

Thank you!

 

Correct positioning

AvyCoffee_0-1724928998676.png

Incorrect positioning (website view) 👇

AvyCoffee_1-1724929039111.png

 

 

Accepted Solution (1)

Yuparkoti
Excursionist
33 2 2

This is an accepted solution.

To properly align your image banner button and address the issue of it being at the bottom of your banner on your website, you can try the following steps:

1. Adjust the button position via Custom CSS:
You can use custom CSS code to adjust the position of the button on your banner. Like example:

```css
/* Adjust button position on banner */
.banner-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```

You can add this code to your theme's Custom CSS section. This code will position the button in the center of the banner. You may need to adjust the values (such as `top`, `left`, etc.) to fine-tune the button's position.

2. Create a container for the button on mobile:
To ensure that the button looks consistent across desktop and mobile devices, you can create a container for the button specifically for mobile devices using CSS media queries. Here's an example code snippet:

```css
/* Container for button on mobile */
@media only screen and (max-width: 768px) {
.banner-button {
display: block;
margin: 0 auto;
text-align: center;
}
}
```

This code will center-align the button within a container on mobile devices. You can adjust the `max-width` value to target specific screen sizes where the container should be applied.

By utilizing these CSS techniques, you should be able to adjust the position of your image banner button and ensure consistent styling between desktop and mobile views.

 

» Claim Shopify Free Trial — 3 Months for $1 Each


» Best Regards, Yuparkoti | Shopify Excursionist
» If my answer helped you, please mark it as a solution | Thanks!

View solution in original post

Replies 6 (6)

sahilsharma9515
Shopify Partner
1262 163 241

Hi @AvyCoffee 

 

 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


AvyCoffee
Excursionist
23 0 7

Certainly. URL is: https://www.avycoffee.com

sahilsharma9515
Shopify Partner
1262 163 241

@AvyCoffee Thanks for providing the URL, I have checked it on my end, but it is working fine at my end:

 

sahilsharma9515_0-1724931091681.png

Can you please specify what's your screen resolution in which you are seeing the issue, or is there any specific browser, because I am unable to replicate the issue.

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


AvyCoffee
Excursionist
23 0 7

Yes, my screen resolution is 1920 x 1080, and I get the misplace in both Chrome and Edge. I get the same error in incongito mode, too.

AvyCoffee
Excursionist
23 0 7

Also, when I scale my screen to 150%, it lines up properly.

Yuparkoti
Excursionist
33 2 2

This is an accepted solution.

To properly align your image banner button and address the issue of it being at the bottom of your banner on your website, you can try the following steps:

1. Adjust the button position via Custom CSS:
You can use custom CSS code to adjust the position of the button on your banner. Like example:

```css
/* Adjust button position on banner */
.banner-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```

You can add this code to your theme's Custom CSS section. This code will position the button in the center of the banner. You may need to adjust the values (such as `top`, `left`, etc.) to fine-tune the button's position.

2. Create a container for the button on mobile:
To ensure that the button looks consistent across desktop and mobile devices, you can create a container for the button specifically for mobile devices using CSS media queries. Here's an example code snippet:

```css
/* Container for button on mobile */
@media only screen and (max-width: 768px) {
.banner-button {
display: block;
margin: 0 auto;
text-align: center;
}
}
```

This code will center-align the button within a container on mobile devices. You can adjust the `max-width` value to target specific screen sizes where the container should be applied.

By utilizing these CSS techniques, you should be able to adjust the position of your image banner button and ensure consistent styling between desktop and mobile views.

 

» Claim Shopify Free Trial — 3 Months for $1 Each


» Best Regards, Yuparkoti | Shopify Excursionist
» If my answer helped you, please mark it as a solution | Thanks!