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

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

Kirkus2001
Tourist
7 0 1

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

Example 1 - 1920X1080

Example 2 - 2560x1600

13.png

14.png

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

Replies 13 (13)

BSS-TekLabs
Shopify Partner
2350 688 806

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Kirkus2001
Tourist
7 0 1
BSS-TekLabs
Shopify Partner
2350 688 806

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

step.png

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Kirkus2001
Tourist
7 0 1

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

K-Mahesh
Shopify Partner
21 3 5

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
Tourist
7 0 1

Store url https://kirkus.co

K-Mahesh
Shopify Partner
21 3 5

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
Tourist
7 0 1

Not worked !

BSSCommerce-B2B
Shopify Partner
1954 562 561

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

 

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.

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Kirkus2001
Tourist
7 0 1

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

Priyanka_
Shopify Partner
84 15 23

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.

Was I helpful? 

Buy me a coffee 



If I managed to help you then, don't forget to Like it and Mark it as Solution!

Kirkus2001
Tourist
7 0 1

Website url https://kirkus.co/

Priyanka_
Shopify Partner
84 15 23

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

Was I helpful? 

Buy me a coffee 



If I managed to help you then, don't forget to Like it and Mark it as Solution!