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

Shopify Discussion
,

Topic summary

Issue: The banner button shifts position across screen sizes (e.g., 1920×1080 vs 2560×1600). Screenshots and CSS snippets are central to understanding the problem.

Attempts: Multiple CSS fixes were suggested via media queries to adjust padding-left on the hero section selector (.section-template–…_settings). Variants at 3–4.5% were tried but did not work.

Diagnosis: The banner image uses object-fit: cover (CSS that scales/crops an image to fill its container). Because the text is baked into the image, the visible composition changes per resolution, making the button appear to move.

Proposed solution: Replace the banner with an image without text, then overlay the headline and button as theme content (HTML/CSS). This ensures responsive positioning across breakpoints.

Additional suggestions: Try text-align: left or float: left, but the core issue remains the image-as-text.

Latest update: The site (kirkus.co) was reviewed; the image-with-text issue confirmed. The helper requested the theme’s hero section code to provide precise guidance.

Status: Unresolved/ongoing. Action items: provide hero section code or implement a text overlay approach to achieve consistent button placement.

Summarized with AI on December 23. AI used: gpt-5.
1

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

Example 1 - 1920X1080

Example 2 - 2560x1600

13.png
13.png4320×2160 687 KB

14.png
14.png4320×2160 719 KB

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

1 Like
2

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.

3

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.

4

https://kirkus.co

5

Store url https://kirkus.co

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

step.png
step.png1865×854 125 KB

  • 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.
7

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

8

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.

BSSCommerceB2B_0-1722083178819.png
BSSCommerceB2B_0-1722083178819.png1968×1012 269 KB

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.

9

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.

10

Not worked !

11

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

12

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.

13

Website url https://kirkus.co/

14

@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.