Responsive button, and grey line under image?

Solved
ShutterFox
New Member
11 0 0

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>

0 Likes
ShutterFox
New Member
11 0 0

I've added this, is this correct?

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

0 Likes

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

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
ShutterFox
New Member
11 0 0

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! 

0 Likes
ShutterFox
New Member
11 0 0

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

0 Likes
expectcode
Shopify Expert
4 0 0

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

 

Thanks

Momin

0 Likes

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?

diego_ezfy_0-1624821249929.png



If so, to remove them you can use the following:

.shopify-section > hr{
    display: none;
}


Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes