Banner content positioning

[AvyCoffee]

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

Incorrect positioning (website view) 👇

[sahilsharma9515]

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

[AvyCoffee]

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

[sahilsharma9515]

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

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

[AvyCoffee]

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]

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

[Yuparkoti]

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.