Responsive button, and grey line under image?

[ShutterFox]

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>

[ShutterFox]

I've added this, is this correct?

@media screen and (max-width: 600px) { .btn { color: white; font-size: 10px; padding: 1px; width: 20%; }

[diego_ezfy]

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

[ShutterFox]

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! 

[ShutterFox]

I think I've figured it out, if you can see it, let me know if that's now right? 🙂

[diego_ezfy · 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

[expectcode]

Hi, Please share your store url so that I can help you.

Thanks

Momin