Liquid, JavaScript, themes, sales channels
This is the code which I have currently, to make my button responsive would I need to add media query's? or is there another way? Also can't seems to get this grey line to go away under my image, is that to do with the box or do I need to resize to fit? I haven't launched site just yet to share url. Screenshots attached! Appreciate any help. Thanks 🙂
<style>
.box {
position: relative;
width: 100%;
max-width: 2000px;
}
.box img {
width: 100%;
height: auto;
}
.box .btn {
position: absolute;
top: 83%;
left: 25%;
transform: translate(-50%, -50%);
background-color: #525F56;
border-radius: 7px;
}
.btn:hover {
background-color: #707872;
color: white;
}
</style>
<div class="box">
<img src="https://cdn.shopify.com/s/files/1/0536/9685/6232/files/SaardeBanner.jpg?v=1623876461" alt="saarde home">
<button class="btn">Shop</button>
</div>
Solved! Go to the solution
This is an accepted solution.
@ShutterFox
You don't necessarily need media queries to achieve responsiveness, it depends what you're trying to achieve.
When you say you want your button responsive, what exactly do you mean? It seems to be fine both on mobile and desktop.
In regards to the gray line below the images, do you mean this?
If so, to remove them you can use the following:
.shopify-section > hr{
display: none;
}
Kind regards,
Diego
I've added this, is this correct?
@media screen and (max-width: 600px) { .btn { color: white; font-size: 10px; padding: 1px; width: 20%; }
Hello @ShutterFox,
Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).
If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.
Kind regards,
Diego
Hey,
Thank you for getting back to my question 😊
heres the link: https://3oeqqyccamxvzf82-53696856232.shopifypreview.com
hope that’s correct, let me know if there’s any issue 😊
cheers!
I think I've figured it out, if you can see it, let me know if that's now right? 🙂
This is an accepted solution.
@ShutterFox
You don't necessarily need media queries to achieve responsiveness, it depends what you're trying to achieve.
When you say you want your button responsive, what exactly do you mean? It seems to be fine both on mobile and desktop.
In regards to the gray line below the images, do you mean this?
If so, to remove them you can use the following:
.shopify-section > hr{
display: none;
}
Kind regards,
Diego
Hi, Please share your store url so that I can help you.
Thanks
Momin
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024