Re: Make buttons the full Screen width

NoahOnyejese · ‎11-09-2022

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:

<body>

<div class="mobileShow">

<button name="submit" value="Shop Men" class="mens-wear" onclick="window.location.href='https://www.jaglion.co.uk/collections/mens-wear';">MENS WEAR</button>

<button name="submit" value="Shop Women" class="womens-wear" onclick="window.location.href='https://www.jaglion.co.uk/collections/womens-wear';">WOMENS WEAR</button>

</div>

</body>

<div class="desktopShow"></div>

<style>

.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;

}

</style>

<style>

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;}

</style>

KetanKumar · ‎11-10-2022

@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;}
}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

ExpertRookie · ‎11-11-2022

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;
}

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

suyash1 · ‎11-09-2022

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

NoahOnyejese · ‎11-10-2022

www.jaglion.co.uk

Password: JAGLION1/

notice that this is only visible on mobile.

MandasaTech · ‎11-09-2022

Hello @NoahOnyejese,
https://www.jaglion.co.uk/password
## Your online store is password protected please share your store password.

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

ExpertRookie · ‎11-09-2022

@NoahOnyejese

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

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

NoahOnyejese · ‎11-10-2022

Sure the password is: JAGLION1/

please notice this is only visible on mobile!

KetanKumar · ‎11-10-2022

@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;}
}

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

NoahOnyejese · ‎11-11-2022

Unfortunately it didn't work...

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

ExpertRookie · ‎11-11-2022

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;
}

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

KetanKumar · ‎11-11-2022

@NoahOnyejese

i have try same code its work see attachment

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

NoahOnyejese · ‎11-10-2022

the password is: JAGLION1/

please notice this is only visible on mobile!

KetanKumar · ‎11-09-2022

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

NoahOnyejese · ‎11-10-2022

Thanks a lot!

The password is: JAGLION1/

The URL is: www.jaglion.co.uk

Please notice this is only visible on mobile!

Re: Make buttons the full Screen width

How to make buttons full screen width on mobile?

Community Blog Articles