Button width in cart

Basebollfoto · 2017-09-24 01:23:10

I have a problem with my cart buttons. I want to have my own text on the Paypal button which gives me four buttons. The problem is that they don't all fit on one row and the first and fourth button are so close to (on top of) each other that they look as one. Is it possible to modify the width to have them all on one row? and if so how do I go about it?

Ben · 2017-09-24 07:47:47

Hi, can you provide a link to a cart-enabled gallery so that we can see this and advise?

Basebollfoto · 2017-09-24 14:32:51

Certainly and happily: http://foto.hunderbanan.se/galleries/ku … usti-2016/

Thanx in advance

rod barbee · 2017-09-25 23:54:18

you can try changing the buttons' width using custom css:

#cart-buttons button {
width: 20%;
}

By default, the buttons have a 25% width. It looks like that's being applied to a text-based PayPal checkout button as well. Add that 25% width to the 24px right margin to each button and you get more than 100% width, which causes the wrapping.

This will be something for Matt and Ben to look at. In the meantime, you can use the custom css above.

Basebollfoto · 2017-09-26 01:50:59

Ayayay. I was hoping to avoid this. I will give the custom css a shot. It is the final piece before launching the site to some initial customers and I am motivated.

Thanx Rod!

rod barbee · 2017-09-26 01:54:08

Custom css is easy to implement. The problem is that that once you start using it, you start thinking of all sorts of things you can tweak

Basebollfoto · 2017-09-26 14:09:50

Implemented. That part was easy enough. Thanx!

Basebollfoto · 2017-09-26 17:48:49

Hi again Rod,
A little further testing shows that these buttons didn't turn out so well when using a mobile phone. I guess that there are separate styles for different platforms. Could you please nudge me in the direction on where I can read up on the topic.

The manual chapter on css states "..., it's good to begin by examining the page template's generated stylesheet. " A sound advice which might very well answer my question above. However, I don't know where to find them...?

I did some testing based on this post and https://www.w3schools.com/css/css3_buttons.asp It looks great on my desktop but not so much on my mobile device....

//Mr Not-at-all-familiar-with-php-web-design-nor-how-to-apply-css

rod barbee · 2017-09-26 21:20:07

You'll need to use CSS media queries to style the buttons based on device/browser width.

there is already styling for this, but the custom css you added overrides the existing media query, so that css needs to be added back in. Add this after your existing custom css:

@media only screen and (max-width: 640px) {

	#cart-buttons button, 
	#cart-buttons input[type="button"],
	#cart-buttons input[type="submit"]
	{
		float: none;
		margin: 0.5rem 0;
		padding: 0 24px;
		text-align: left;
		width: 75%;
	}

}

you can view the page css by looking at the page's source code and clicking on the appropriate href link in the source code.
For the general css, look for a line that looks like this:

<link rel="stylesheet" type="text/css" media="all" href="http://foto.hunderbanan.se/backlight/publisher/resource.php?template=1&extension=css&name=style" />

But there is also cart specific css, the link to which is just a few lines below the above:

<link rel="stylesheet" href="../modules/module-cart/lib/css/cart.css" />    <link rel="stylesheet" href="/backlight/custom/css/medhund.css" />

Basebollfoto · 2017-09-27 01:31:51

Hmmm.

I put in your suggestion in the custom stylesheet but it won't play. If I toggle off the custom css it looks great in my phone with the buttons on top of each other (I assume that float: none; is accomplishing this). Toggle on - awful.

I then followed your reference (thanx for the explanation) and found the default css. The only difference I noticed was:
#cart-buttons form {
margin: 0;
}
I looked in https://www.w3schools.com but could not undestand what it does. I simply tried to add it but to no avail. I thus turn back to you once more.

//Puzzled

rod barbee · 2017-09-27 01:48:42

It looks find on my phone. The four buttons are in one column
Also looks good on the desktop, with the buttons in four columns.

The only thing you really needed to change for the desktop version was the button width. You've added float:center; to the rule, but "center" is not a value for the float property so that's not really doing anything.

You don't really need to add

 #cart-buttons form {
	margin: 0;
}

since that's already in the cart css.

If you want the buttons in one column for devices wider than 640px (like an iPad in landscape orientation), you can change the media query max-width number to accomplish that. (max-width: 1024px;)

rod barbee · 2017-09-27 02:36:24

And there are other options you can try in the media query. You can change the button width to 100% so the buttons take up the whole width. You can also center the text in the button if you wish.

Basebollfoto · 2017-09-27 03:10:53

Thank you for your time and testing. I am using Chrome on my old Samsung S3. I tried to clear the cache to no avail. Called one of my three testers and everything was ok on his phone so I will drop this.

Thank you for your excellent support and for opening up the world of css

rod barbee · 2017-09-27 03:16:07

Ben · 2017-09-27 07:09:08

I've found that the following works with the default text, filling the width as before but without exceeding the page width:

#cart-buttons input[type="submit"]
{
	float: left;
	margin: 0 2% 0 0;
	width: 23%;
}

Basebollfoto · 2017-09-27 19:12:57

I changed the cart.css with your content Ben and it worked. Will this be the new default setting?

How come nobody seen this problem before? Is everyone else using the Paypal icon?

Ben · 2017-09-27 20:47:53

This will be the new default setting. It's likely that just about everybody is using the Paypal button. It's sometimes surprising to find how long an issue can be out there before anybody discovers it, suggesting that some features are seldom used.

We have a new update to the Cart in testing, which addresses a bunch of issues. Would you be interested in helping test it?

Basebollfoto · 2017-09-27 23:26:14

Absolutely

It used to be my proffesion. I.e. requirement management and acceptance testing. Not much of a programmer though

One of my testers, I used an ex-collegue, found yet another cart issue. Should I send it to you here? in a new post? or in a mail?

rod barbee · 2017-09-27 23:51:59

a new post would probably be best in case others are having the same issue

Ben · 2017-09-28 06:14:11

I haven’t seen your name in any of your posts. How should I address you in the email?

Basebollfoto · 2017-09-28 13:58:37

Ah! Sorry. My name is Peter Ulvatun. Peter is fine

Community @ The Turning Gate

#1 2017-09-24 01:23:10

Button width in cart

#2 2017-09-24 07:47:47

Re: Button width in cart

#3 2017-09-24 14:32:51

Re: Button width in cart

#4 2017-09-25 23:54:18

Re: Button width in cart

#5 2017-09-26 01:50:59

Re: Button width in cart

#6 2017-09-26 01:54:08

Re: Button width in cart

#7 2017-09-26 14:09:50

Re: Button width in cart

#8 2017-09-26 17:48:49

Re: Button width in cart

#9 2017-09-26 21:20:07

Re: Button width in cart

#10 2017-09-27 01:31:51

Re: Button width in cart

#11 2017-09-27 01:48:42

Re: Button width in cart

#12 2017-09-27 02:36:24

Re: Button width in cart

#13 2017-09-27 03:10:53

Re: Button width in cart

#14 2017-09-27 03:16:07

Re: Button width in cart

#15 2017-09-27 07:09:08

Re: Button width in cart

#16 2017-09-27 19:12:57

Re: Button width in cart

#17 2017-09-27 20:47:53

Re: Button width in cart

#18 2017-09-27 23:26:14

Re: Button width in cart

#19 2017-09-27 23:51:59

Re: Button width in cart

#20 2017-09-28 06:14:11

Re: Button width in cart

#21 2017-09-28 13:58:37

Re: Button width in cart

Board footer