|
James Murrin
|
April 23, 2021 at 8:52 am
Hi Tony
We are selling tickets and have found that, if the buyer is on mobile (or any other reasonably narrow width screen), the white box which appears on the grey background after you’ve selected your tickets isn’t showing because the left hand margin is hard coded to be 152px wide which means that it’s displaying off the edge of the narrower screens. Here’s the code I picked up:
<div id=”cart-results-modal-wrap-dv” style=”position: fixed; top: 5.1805px; left: 582.25px; margin: 0px;”>×
<div id=”cart-results-modal-dv”>
<div class=”cart-results-wrap-dv”>
<h3>1 item was successfully added for this event.</h3>
</div>
<div id=”cart-results-whats-next-buttons-dv”>
<span class=”cart-results-button-spn”>
<span class=”dashicons dashicons-arrow-left-alt2″></span>Back
</span>
<span class=”cart-results-button-spn”>
Checkout <span class=”dashicons dashicons-arrow-right-alt2″></span>
</span>
</div>
Please could you let me know what the fix is so that we can fix this issue? I will try to change the left margin to 1em or something, but I’m sure you’ve got a more elegant solution!
Many thanks.
Dee
|
|
Tony
|
April 23, 2021 at 9:30 am
Hi Dee,
Have you already applied a fix for this as I don’t see any issue on your site on mobile?
|
|
James Murrin
|
April 23, 2021 at 9:32 am
Hi Tony, yes, I’ve done this:/*23/4/21 DSS emergency fix, left hand margin too great, so spilling off narrow screens*/
#cart-results-modal-wrap-dv {left: 1em!important;}
which has fixed the problem for me and my tests. But one user (on a samsung) says he still can’t see it.
Is this the best solution? It seems strange to have a fixed left positioning like this. Do you think it’s coming from the theme or from EE?
Thanks
Dee
|
|
Tony
|
April 26, 2021 at 6:34 am
That fix throws the desktop view out as it pushes the modal over to the left.
So a couple of questions here.
In your opening post, you mentioned the left margin is hardcoded to use 152px, where do you see this?
The code you posted in your opening post has a left attribute of 582.25px; and all margins set to 0. That’s expected and the ‘hard coded’ value is not actually hard coded, it’s inline styles calculated on the fly. So it’s not a left margin, but rather the position of the element, Left 582.25px and Top 5.1805px in your example. In short, that’s inline styles to centre the element based on its position on the page.
What I’m seeing on your site is it works In portrait mode, but in landscape mode, there is no ‘top’ value, so the element is actually hidden away at the bottom of the page, not pushed over to the left/right
Try removing the code you added above and replace it with this:
#cart-results-modal-wrap-dv {
top: 1px;
}
Does it work correctly for you then?
Note I’m using Chrome Desktop emulating mobile devices and also using Chrome remote debugging to connect to a Samsung Galaxy S8 to compare, both show the same results for me.
I’m not sure why the JavaScript calculations are off on that page but as your the only user I’ve seen report this specific issue I’m guessing it’s something within the theme.
|
|
James Murrin
|
April 27, 2021 at 10:21 am
Hello Tony, thanks very much for taking the time to check this through and for explaining it to me. You’re right, there’s no left margin and the value I’d quoted was wrong – apologies, I was in a rush.
I’ve tried your suggestion and although that aligns it at the top now, the left value still means that the box is lost on mobile in portrait mode.
I’m now using the fix: #cart-results-modal-wrap-dv {top:1px!important; left: 1px!important;} which does the trick of keeping the white modal box in view under all circumstances, I can see.
I’m sure you’re right – it must be the theme. I’m happy to live with this if it works and at least tickets can be booked.
Many thanks for your help & thoughts.
Regards
Dee
|
|
Tony
|
April 27, 2021 at 3:03 pm
You can wrap the above in a media query to only set those on small screens:
@media (max-width: 640px) {
#cart-results-modal-wrap-dv {
top:1px!important;
left: 1px!important;
}
}
(You likely don’t need the !important in those either)
The strange part is the fact that I’m getting different results here, I’ve had no issue with the left, only top and I’m not sure why.
|
|
James Murrin
|
April 28, 2021 at 10:45 am
Many thanks for your help Tony.
Dee
|
