Navigation buttons on Mobile

[bestfitbybrazil]

When you look at mobile view in “Checkout” at the bottom, the navigation button is a rounded and its hard to see the word on the button.  I was going to style it better, but when i look at it on the css custom view on computer sized down to mobile view, the button is square and easy to read. The button appears differently on mobile than on computer when trying to style it.  How to fix this issue?

 

This is the issue see bottom of this image

 

This is what i see when i try to style it online even when i shrink screen down to mobile size:

[Harry]

Hi,

Please add below code

.button.alt.yith-wcms-button {
	border-radius: 40px;
	background: #fff;
	border-width: 2px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0 34px;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I put the code and it only changed case to capital but look on your mobile device and it will look like this still.

[Harry]

I tried add item to cart on mobile it can’t do, please check your custom code.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

i put code in them area and custom code.  i then clear all cache and on mobile it still looks same.  Add to cart is working fine.  go to checkout to see the button issue.

You are looking at https://bestfitbybrazil.com right?

[Harry]

Yes, i check on https://bestfitbybrazil.com right now, when select variation the sticky add to cart button disappear, please check.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

i think i know why you can’t add to cart.  you’re trying to add an item to cart that you have not selected the Attribute “Size” for yet.  i’m working on getting the add to cart button to pop this up somehow, but meanwhile watch this video on where to select the size then it will add to cart and not give you a message.

This is what i do to add to cart.  try it.

https://www.dropbox.com/s/q6g2yvalvl39bvh/IMG_2334.TRIM.MOV?dl=0

[Harry]

Hi,

My screen when selected variation

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

what cell phone do you have? what size?  i may need to make style adjustments.  i always use

@media only screen and (max-width: 768px)  for all devices mobile but not sure if that will look good on smaller devices

Meanwhile what happens if you turn your cellphone sideways so you can see buttons on wider screen?

[Harry]

I used iPhone7+ and iOS 10.3

 

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I made some adjustments. please try now. thx.

[Harry]

It still the same.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Ok you should be able to check view it now by going to checkout and pressing order info then scroll to bottom and you should see the skewed button on left

 

[Harry]

Please change prev code to

.button.alt.yith-wcms-button {
	border-radius: 40px;
	background: #fff;
	border-width: 2px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0 34px;
-webkit-appearance: none;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts