New and old elements lead to bugs in eventON

[ubercool]

I’m using Pro 1.2.6, WordPress 4.8.3 and eventON 2.6.

I have embedded the same events calendar using shortcodes on the home page in a new section element and on the Events page where it is embedded using only the WordPress editor.

On https://trendshow.com/ you can see that the day number and month(s) are misaligned. Also notice that when you click on any event, Google Maps will show Portland, OR. The result is the same using a classic element.

On https://trendshow.com/event-directory/ the day and number are properly aligned and the map correctly shows Mendon, MA.

This kept me up until 3a last night. I will add my credentials in the following post.

[jade]

Hi there,

The date of the event calendar on the homepage and it is misaligned because of this code that is in the custom CSS:

.date {
  display: block;
  width: 100%;
  max-width: 250px;
  margin: 0 auto 35px;
}

If you try to remove the code and reload the page, the date should be aligned correctly. You will have to edit the CSS or remove the bottom margin in the code.

Hope this helps.

[ubercool]

Here’s my Custom CSS, can you point out where that code is?

/* To Fix the Headline Issue */

.h-custom-headline.accent span {
line-height: 163%;
}

/* Topbar Styling */

.x-topbar {
padding: 2px 0px 0px 0px;
}

.x-topbar .p-info {
text-transform: none;
}

/* Feature box margin below image */

.x-feature-box-graphic {
margin-bottom: 60px;
}

/* Feature box text margin control */

.x-feature-box-text {
padding: 10px 30px 10px 30px;
}

/* Remove blog post icons */

.entry-title:before {
display: none;
}

/* Reduce slider size */

.x-flexslider .x-slides img {
width: 75%;
}
.x-flexslider-shortcode-container {
width: 81%;
float: none;
margin-right: auto;
margin-left: auto;
}

.x-flexslider .x-slides img {
margin: 0 auto;
}

/* Accordion’s title color */
.x-accordion-heading .x-accordion-toggle {
color: #c8b46f !important;
}

/* Accordion’s title background color */
.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: #434A54;
}

/* EventON link color */
.eventon_events_list
.eventon_list_event a {
color: #0099CC;
}

[jade]

Hi there,

The code is in the custom CSS of the homepage, not in the global CSS.

Hope this helps.

[ubercool]

OK, that was CSS part of the Pro template I used. Now how about the Google Maps bug? Why does it show the wrong place on the home page but not on the Events page?

[Joao]

Hi @ubercool

Upon checking your page and your events page the map looks the same and the pin is on the same place. Can you clarify?

Thanks!

[ubercool]

Try this:

1. Visit https://trendshow.com/

2. Click on all events and you will see the map showing Portland, OR (should be Mendon, MA).

3. Visit https://trendshow.com/event-directory/

4. Click on any event, they all correctly show Mendon, MA.

eventON shortcode is identical on both pages and so is Google API. I have attached a screenshot to showing the Portland result with Mendon, MA address. I have optimized the database and removed all transients.

[Joao]

Hi There,

On your Wp Fastest Cache I deleted the cache + CSS JS Minified and your maps are updated.

Hope it helps

[ubercool]

First of all Fastest Cache is not enabled. And second, the problem is still there;

1. Maps not displayed correctly in a Pro element-based page
2. Maps displayed correctly in a non-Pro element based page.

[ruenel]

Hello There,

Thanks for updating in! I am another staff checking in this thread. I have viewed the home page and the events page and both pages were displaying the same maps. I could not replicate the issue.

Home page:

Events Page:

You maybe having a browser caching issue. Please clear your browser cache or use private browsing mode and test your site pages again.

Please let us know how it goes.

[ubercool]

I ran this issue by the eventON developer and he asked me to remove your Google Maps API call from the home page, where I used it to also display a location map. Once I removed your map element, the issue was gone.

So there is a conflict between your Google API call and theirs. See attached screenshot of what I saw today before deleting the map.

[ruenel]

Hello There,

I wouldn’t call that a bug or issue at all. The problem is that you have posted a map using the same google api twice on the same page which is not acceptable by Google. There is a very strict rules in Google that says:

You can check the documentation here: https://developers.google.com/maps/documentation/directions/start

[ubercool]

I did not know that, thought it was site-wide. I could not even find it in documentation, but it solved the problem, so thanks!

[paul.r]

You’re welcome!