How do I keep button position the same on all screens sizes

[Kirkus2001]

Button has a different position depending on the screen resolution used by the customer.

Example 1 - 1920X1080

Example 2 - 2560x1600

I want the button to appear like example 1 on all screen resolutions

[BSS-TekLabs]

Hello @Kirkus2001 .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[Kirkus2001]

https://kirkus.co

[BSS-TekLabs]

- Here is the solution for you @Kirkus2001 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media (min-width: 1024px) {
    .section-template--23123163251033__ss_hero_10_TEfyr4-settings {
        padding-left: 4% !important;
    }
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Kirkus2001]

Not worked, in 2560x1600 resolution still the same as I sent in the example

[K-Mahesh]

Hello @Kirkus2001 

Could you kindly provide us with your store URL and, if applicable, the password, so i can check and provide you possible solution for your question.

[Kirkus2001]

Store url https://kirkus.co

[K-Mahesh]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your base.css or theme.css file
3. Paste the below code from bottom on base.css or theme.css

@media (min-width: 1024px) {
    .section-template--23123163251033__ss_hero_10_TEfyr4-settings {
        padding-left: 3% !important;
    }
}

@media (min-width: 1199px) {
    .section-template--23123163251033__ss_hero_10_TEfyr4-settings {
        padding-left: 4% !important;
    }
}

@media (min-width: 1999px) {
    .section-template--23123163251033__ss_hero_10_TEfyr4-settings {
        padding-left: 4.5% !important;
    }
}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Kirkus2001]

Not worked !

[BSSCommerce-B2B]

Hi @Kirkus2001 , 

I have checked your website, and the issue is that the image banner is set with the "object-fit: cover" property. Therefore, for each different resolution, the image will automatically cover according to the screen ratio. What you are comparing is the position of the button and text within the image, so you will see differences.

My solution is to replace the current banner image with one that does not contain text. Then, create a text element with similar content, such as "Because pets deserve the best," in the theme customization and style it with CSS. This will ensure responsiveness across different resolutions.

Hope it helps,

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

[Kirkus2001]

That makes sense, but I don´t know how to code !

[Priyanka_]

Hi @Kirkus2001 
You can try using the CSS property `text-align: left;` or `float: left;` to see if it works. Alternatively, share your store URL with me, and I can take a look and provide a precise solution.

[Kirkus2001]

Website url https://kirkus.co/

[Priyanka_]

@Kirkus2001 

I reviewed your website and noticed that your banner image includes text, which adjusts according to the screen size. To resolve this issue, you could use a banner image without text and then create custom text fields to overlay the text on the banner.

If you’d like further assistance, please share the theme file code with me. Follow these steps to provide the code:

1. Navigate to **Online Store** -> **Themes** -> **Edit Code**.
2. Locate the file associated with the banner section, often named something like "hero" or similar.
3. Copy and provide the complete code from this file.

This will allow me to assist you more effectively.