|
KTDMS
|
November 12, 2019 at 2:01 pm
When we try to test our events on mobile devices (both iPhone & Android) we can select and item, but when we press “View Event Cart” a blackish cover comes on the devices and you can’t move forward or backwards. Here are the URLs:
https://www.keystodigitalmarketingsuccess.com/events/conference-registration/
https://www.keystodigitalmarketingsuccess.com/events/master-class-registration/
Thank you.
|
|
Josh
|
November 12, 2019 at 2:20 pm
Hi,
It looks like there may be some conflicting CSS with the theme.
You could add the following CSS to your site’s “Additional CSS” page to ensure the cart modal is centered on the viewport:
#cart-results-modal-wrap-dv{
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
}
You can add the above to the site’s Appearance > Customize > Additional CSS page, then click the Publish button to save the changes.
|
|
KTDMS
|
November 12, 2019 at 3:00 pm
Thank you. This did not help. I can send you a screen shot if you’d like.
|
|
Josh
|
November 12, 2019 at 6:21 pm
Actually I do not need a screenshot because you’ve shared a URL to the site.
May I ask where exactly did you add the CSS and is it still on the site?
|
|
KTDMS
|
November 13, 2019 at 7:13 am
I added in the Custom CSS section under Theme Settings (which available in the theme I use) and yes it is still on the site.
|
|
Josh
|
November 13, 2019 at 8:04 am
Hi,
I checked again and I’m not seeing that CSS loading anywhere. For example, I did find this custom stylesheet:
https://www.keystodigitalmarketingsuccess.com/wp/wp-content/plugins/wp-custom-css/wp-custom-css.css?1530104501
but the provided CSS isn’t within that stylesheet.
Does the theme or another plugin on the site cache all of the CSS? If so, then the cache will need to be cleared before the changes will take effect.
|
|
KTDMS
|
November 13, 2019 at 8:07 am
We don’t use a plugin for Custom CSS, it is built in as a part of our Theme that we purchased. Therefore you wouldn’t see it there.
|
|
KTDMS
|
November 13, 2019 at 8:14 am
I added in another place, but it doesn’t fix the issue that after choosing tickets, there is a black screen (can provide screen shot) that doesn’t let a mobile user move forward to check or view cart or whatever.
|
|
Josh
|
November 13, 2019 at 8:47 am
I see the CSS loading now.
It also looks like there’s a z-index issue and some un-closed style rules (or missing brackets) in your stylesheet.
You can add this to fix the z-index conflict:
#ee-overlay{
z-index: 998 !important;
}
Then, near the end of your stylesheet (this one) there’s this:
/*Change the widths of footer widgets*/
@media (min-width: 768px) {
followed by 3 rules to set the widths of footer widgets. After that there’s a number of styles setting text color. What’s missing is a closing bracket for @media (min-width: 768px) { so to fix you’ll add a closing bracket before .woocommerce-page ul.products li.product .products-title a,
Then, at the very end of the file, this is missing a closing bracket:
#cart-results-modal-wrap-dv{
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
|
|
KTDMS
|
November 13, 2019 at 8:57 am
Thanks, we are getting somewhere now. I need your assistance with two other items. 1) I need to change all the events expresso typefaces to black. I cannot do in the theme because of other places it is being used. I tried this code:
#ee-single-page-checkout-dv {
position: relative;
color: black !important;
}
But it only fixed a single page. Is there an overriding attribute I can set?
2) The width of the check out screen is “too wide” for a mobile device, so I have to scroll sideways to actually purchase a ticket. Can this be controlled somehow?
Thanks!
|
|
Josh
|
November 13, 2019 at 9:43 am
In most cases you’ll actually be overriding the theme. This is because EE does not set text colors for most of the elements on the EE pages (there are a few exceptions).
Your theme is setting the body element to have color #a8a8a8 (or gray) so instead of trying to override individual elements with black text, you could do something like this:
body.single-espresso_events,
body.page-id-4218,
body.page-id-4220 {
color: #000;
}
The above will change the default color for text to black for every single event page, the registration checkout page, and the thank you page.
The ticket selector is too wide for small screens on your site, due mostly to the way the theme sets its margins and padding for tables. You can override this for the ticket selector by adding the following CSS:
https://gist.github.com/joshfeck/c391f560acdb7fdc9235
|
|
KTDMS
|
November 13, 2019 at 9:53 am
You ROCK!! Thank you.
|
