|
drkings1
|
June 8, 2023 at 12:44 pm
Hi there,
I’ve just upgraded the MER plugin to the latest version – 2.0.20 and it seems to have had a knock on effect on the layout of (a) the adding to cart confirmation screen and (b) the cart itself.
Here are some screenshots of before and after as viewed on a mobile device: https://photos.app.goo.gl/qsiXSZUPd4aAVd4z6
(The layout issues on desktop are very similar).
Is this a known issue and is there an easy way for my developers to fix it please?
Thanks
Daniel
|
|
drkings1
|
June 8, 2023 at 2:53 pm
p.s. you can have a play with this yourself to see the layout issues at: https://staging4.presencetraining.co.uk/
Curent live site (where no such issues are occurring) is at https://presencetraining.co.uk/
|
|
Tony
|
June 8, 2023 at 4:42 pm
Hi Daniel,
The screenshot link above only has one image, can you add the other so I know what I am comparing against please?
|
|
drkings1
|
June 9, 2023 at 1:37 am
Hi Tony,
I’m sorry. I thought I shared the album with you.
The photo I previously shared was how it is meant to lay out.
This is how it’s currently laying out: https://photos.app.goo.gl/Wj8xk4M3kWkRqRRa7
For the confirmation screen this is how it should lay out: https://photos.app.goo.gl/j8822CXiA4Fsdz799
And this is how it’s currently laying out:
https://photos.app.goo.gl/CMvciHUGCgiqWZ17A
These are the mobile screenshots, but the issues on desktop are very similar.
|
|
drkings1
|
June 9, 2023 at 1:42 am
And this is how the cart should lay out on desktop:
https://photos.app.goo.gl/JdUkdgP6kG4rWePW6
And how it’s currently laying out:
https://photos.app.goo.gl/hEExNi9ZJurb6Uom8
|
|
drkings1
|
June 9, 2023 at 1:44 am
It’s not terrible, but it looks rather messy and unprofessional and I’m concerned that customers might have less confidence in their potential purchase as a result.
|
|
Tony
|
June 9, 2023 at 5:58 am
Hmmm, so part of this is from your theme and the other is from the changes we’ve made to the output.
The cart view has been changed to be clearer as to which tickets apply to which events and it looks like this:
https://monosnap.com/file/CGkOgfMgEIQjrtDNqxwN3Ta8zPIxzJ
That’s not as obvious on your site because the table is set to have no borders so the different sections don’t stand out as much.
I assume the padding, spacing issue where the columns are all close together is one of the biggest issues?
To fix that you can use something like:
#event-cart-qty-frm .event-cart-tbl tr.event-cart-ticket-row td:nth-child(3) {
padding: 1rem;
}
The buttons can be made to be more like the originals by adding this:
#event-cart-qty-frm .mini-cart-button.button, #event-cart-qty-frm .cart-results-button.button, #event-cart-qty-frm .event-cart-button.button {
border-radius: 3px;
padding: 1rem;
font-size: 1.5rem;
}
Add those to Appearance -> Customize -> Additional CSS and see how that looks, you can change the value however you prefer.
|
|
drkings1
|
June 9, 2023 at 6:26 am
Thank you for this!
Does this solve the issue with the alignment on the screen where new items are added?
See:
https://photos.app.goo.gl/rksU49Pq1SQhigjh7 (mobile)
and
https://photos.app.goo.gl/WfhiNjMRgQ1XGWnY9 (desktop)
|
|
Tony
|
June 9, 2023 at 6:43 am
No, for that try:
.cart-results-button {
display: inline-block;
padding: 1rem;
}
|
|
drkings1
|
June 9, 2023 at 7:12 am
Thanks Tony.
Will that fix deal with both (a) the (mis)position of the text within the buttons and (b) the fact that the buttons in the cart-results are themselves out of alignment? Because these appear to be slightly different issues – though perhaps they are connected.
|
|
drkings1
|
June 9, 2023 at 7:14 am
In fact the text position inside the buttons looks fine on mobile, although the buttons are not in lime with each other.
But on desktop the text is not positioned well within the buttons and the buttons are also out of alignment.
So will your fix above solve both these issues or is some other code needed?
Thank you
|
|
Tony
|
June 9, 2023 at 7:17 am
Yes, the text alignment is because there is no padding, the above adds some.
The button alignment is because they are using display: inline-flex;, the above switches that for display: inline-block;.
However, you would be best testing this on the site itself as something else may be starting those fields. I’ve used Chrome Dev Tools to test the above on your site but always bet to test it regardless.
|
|
drkings1
|
June 9, 2023 at 7:19 am
Thank you so much Tony!
I’ve passed this on to my web developers.
I’m very grateful for your help here.
And I’ll let you know how we can on.
|
|
Tony
|
June 9, 2023 at 7:31 am
You know you can easily add this into the site yourself?
Dashboard -> Appearance -> Customize -> Additional CSS.
Like this: https://monosnap.com/file/XLzMc0cs4fMJ2KrWH2uwydzhzMnE6K
|
|
drkings1
|
June 9, 2023 at 1:14 pm
Hi Tony,
Thank you so much for this.
The suggested CSS has been added and it’s completely sorted out the alignment of the buttons on the confirmation of adding screen, which is great!
The cart still looks like this: https://photos.app.goo.gl/GxoVm3RUHVGzHzQ69
Which isn’t ideal as a layout as it looks a bit squashed.
Is there any way we can get a bit more space between the price and total columns?
Was your suggested CSS intended to do that?
|
|
Tony
|
June 9, 2023 at 2:10 pm
Did you add the code from above:
https://eventespresso.com/topic/mer-multi-event-registration-upgrade-causing-layout-issues/#post-344250
I can’t see that CSS in use on the site?
|
|
drkings1
|
June 9, 2023 at 2:35 pm
Hi Tony,
I thought I saw the code as you drafted it the custom CSS, but somehow my developers mis-transcribed it and introduced some extra characters, meaning that the code (presumably) didn’t run as intended!
I’ve now copied and pasted your code correctly and it appears to be working!
Thank you!!!
|
|
Tony
|
June 9, 2023 at 3:12 pm
No problem, I’m glad its working for you 🙂
|
|
drkings1
|
June 13, 2023 at 6:59 am
Hi Tony,
There are two (or three) more cart and checkout issues that I’d really appreciate your help with.
They all relate to how the cart and checkout appear on mobile and tidying this up if possible.
1) Wrapping the title into the left hand column
Please see these two images of the cart and checkout:
https://photos.app.goo.gl/ro5FMF8KftAXBoWR7
https://photos.app.goo.gl/5V7cFZtbCvVHkeDz5
You can see that the event title in bold is going right across the page and making the layout look untidy. I’d love for it to be confined to left hand column, the way that the description is.
I’m sure this can be done. What’s the easiest way please? Is it something I can do myself? Does it require changes via a custom plugin?
2) Padding on the checkout
You can see in the image I’ve shown you of the checkout QTY is banging up against Price and the £ sign is banging up against the letter “l” of “Total”
Is there an easy way to pad this table with some space so that doesn’t occur? I’m guessing it’s a bit more additional CSS?
Thank you
Daniel
|
|
Tony
|
June 20, 2023 at 4:12 am
1) Wrapping the title into the left hand column
Please see these two images of the cart and checkout:
https://photos.app.goo.gl/ro5FMF8KftAXBoWR7
https://photos.app.goo.gl/5V7cFZtbCvVHkeDz5
You can see that the event title in bold is going right across the page and making the layout look untidy. I’d love for it to be confined to left hand column, the way that the description is.
I’m sure this can be done. What’s the easiest way please? Is it something I can do myself? Does it require changes via a custom plugin?
There is no ‘left hand column’ on that row so you can’t easily set that text to a specific with, the layout is something like this:
+---+---+---+
| | | |
+---+---+---+
| |
+---+---+---+
| | | |
+---+---+---+
Where the single column row is the event row and spans across the entire table width.
If I add a grey border to the table on your site you can see this a little better:
https://monosnap.com/file/FEFg1A26U0GGNFyM0gZcwmbXLYyVWz
2) Padding on the checkout
You can see in the image I’ve shown you of the checkout QTY is banging up against Price and the £ sign is banging up against the letter “l” of “Total”
Is there an easy way to pad this table with some space so that doesn’t occur? I’m guessing it’s a bit more additional CSS?
That should already have been fixed with the CSS I gave you earlier.
Is that code on the site?
|
|
drkings1
|
June 20, 2023 at 5:26 am
Hi Tony,
Thank you for your helpful reply.
For part 1 – that’s clear. I now understand that there’s no easy way of sorting this out because the row goes right across the columns.
Though if I were to choose to add grid lines the layout would indeed make more sense.
Would it be easy to restore the grid lines? If so how would I do it?
~
For part 2 of my question the CSS is indeed on the site and seems to be functioning fine.
I think the code you gave me pads the cart but not the checkout. It’s working fine in the cart – adding that extra space and displays really well. I don’t think you gave me any extra code for the checkout.
This is the code you suggested:
#event-cart-qty-frm .event-cart-tbl tr.event-cart-ticket-row td:nth-child(3) {
padding: 1rem;
}
Is there a version of the above code that would do the same for the checkout?
Take a look at this image from my mobile and you should be able to see the the issue:
https://photos.google.com/share/AF1QipNqYzJsRDSdwzUqQpuRO9L4EkKyaXnzOHQF6AVIE4CaYZnRIy4Z-NHn9xU0YTVFUA?key=NUNRc1g0QlJ0MklqTnFVUmIyM2Rub1hpS3N0Vnhn
It’s not terrible, but it just looks rather untidy on mobile. (It’s not an issue on the desktop version of the site).
|
|
Tony
|
June 21, 2023 at 7:32 am
Would it be easy to restore the grid lines? If so how would I do it?
On specifically the cart table?
Sure, you just need some additional CSS:
#event-cart-wrap-dv table,
#event-cart-wrap-dv tr,
#event-cart-wrap-dv td {
border: 1px solid hsl(203, 2%, 70%);
}
Your developers can add additional styles to suit the theme for this.
Is there a version of the above code that would do the same for the checkout?
Oh I see, sure:
#spco-payment-info-table tr.item td:nth-of-type(3) {
padding: 1rem;
}
|
|
drkings1
|
June 21, 2023 at 8:39 am
Hi Tony,
That’s really helpful. Thank you so much!
The cart does make much more sense with the gridlines in place, especially on mobile.
With regard to the padding the final checkout your code has helped the left hand side of the table.
But “Total” is still banging up against the final price on the mobile version (£750), which is OK but not ideal.
See this picture: https://photos.app.goo.gl/3dLc1aAynZ3vvuZz5
If there’s an easy fix for that I’d really appreciate it. If not, I can live with it!
|
|
drkings1
|
June 21, 2023 at 8:47 am
PS I’ve just tried adapting the code you gave above me to replace the (3) with a (4), which did work on mobile, but it knocked the alignment of the table out on desktop!
i.e.
#spco-payment-info-table tr.item td:nth-of-type(4) {
padding: 1rem;
}
I’m guessing that there isn’t an easy way of solving this one, but do let me know if I’m wrong.
Like I said I can live with it being as it is on mobile, but if it can be sorted out that would be really nice.
|
|
Tony
|
June 22, 2023 at 6:58 am
Ah, apologies, I missed the total column, for that you can add::
.total_currency {
padding: 0 1rem;
}
That work better?
|
|
drkings1
|
June 22, 2023 at 1:45 pm
Thank you Tony!
Yes, that does work better!
|
|
drkings1
|
June 22, 2023 at 1:45 pm
I’m very grateful for all your help across this and all our recent development issues.
|
|
Tony
|
June 23, 2023 at 6:23 am
Hi Daniel,
My pleasure, I’m glad I could help in some small part 🙂
|
