How to make buttons full screen width on mobile?

[NoahOnyejese]

Hi,

I coded two buttons for my store to be the size of 50 % of the screen width, Unfortunately, they’re not full wide kinda. there is still a small space there. I tried putting borders on all 4 sides but there is still a slight spot on the side which is very noticeable on mobile. it automatically makes the whole thing look cheap.

I’m using a custom liquid to code this and this is my code:

MENS WEAR
WOMENS WEAR

.line{ border: 1px;}
body {text-align: center;
}
.mobileShow{width: 100vw}
.mens-wear{background-color: rgb(20, 20, 20);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
display: inline-block;
width: 50%;
height: 50px;
cursor: pointer;
border-top: 2px solid rgb(40, 40, 40) ;
border-bottom: 2px solid rgb(40, 40, 40) ;
border-right: 2px solid rgb(40, 40, 40);
border-left: 2px solid rgb(20, 20, 20);
margin-right: -10px;
}

body {text-align: center;
}
.womens-wear{background-color: rgb(20, 20, 20);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
display: inline-block;
width: 50%;
height: 50px;
cursor: pointer;
border-top: 2px solid rgb(40, 40, 40) ;
border-bottom: 2px solid rgb(40, 40, 40);
border-left: 2px solid rgb(40, 40, 40);
border-right: 2px solid rgb(20, 20, 20);
}
.desktopShow {display: none;
}
@media only screen and (min-width: 767px) {
.desktopShow {display: block;
}
.mobileShow {display: none;
}
}
body{background-color: #000;}

[suyash1]

@NoahOnyejese - can you please share this page link where you have buttons?

[MandasaTech]

Hello @NoahOnyejese ,
https://www.jaglion.co.uk/password

Your online store is password protected please share your store password.

[ExpertRookie]

@NoahOnyejese

Could you share your store password? Then I can review it

[KetanKumar]

@NoahOnyejese

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[NoahOnyejese]

www.jaglion.co.uk

Password: JAGLION1/

notice that this is only visible on mobile.

[NoahOnyejese]

the password is: JAGLION1/

please notice this is only visible on mobile!

[NoahOnyejese]

Sure the password is: JAGLION1/

please notice this is only visible on mobile!

[NoahOnyejese]

Thanks a lot!

The password is: JAGLION1/

The URL is: www.jaglion.co.uk

Please notice this is only visible on mobile!

[KetanKumar]

@NoahOnyejese

can you please try code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

@media (max-width: 766px){
.mobileShow {display: flex;}
.womens-wear {flex: 1;}
}

[NoahOnyejese]

Unfortunately it didn’t work…

I still have the code in base.css so you can take a look if you’d like.

[ExpertRookie]

Hi @NoahOnyejese
Try to use this code

.mobileShow {
border: 2px solid rgb(40, 40, 40);
border-width: 2px 0 2px;
}
.mens-wear {
border: none;
}
.womens-wear{
border-width: 0 0 0 2px;
}

[KetanKumar]

@NoahOnyejese

i have try same code its work see attachment