All things Shopify and commerce
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
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
- 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.
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
Not worked, in 2560x1600 resolution still the same as I sent in the example
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.
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.
Not worked !
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.
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
That makes sense, but I don´t know how to code !
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.
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024