The Events Calendar Mobile View special - Support | Kriesi.at

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
September 6, 2021 at 1:46 pm #1319870

YourChoice Informatik GmbH
Participant

Hi
We use Enfold and The Events Calendar.
Since the last big update of The Events Calendar we have some problems with our events.
The desktop problem could be fixed by CSS code which you gave us.
But now we saw, that also the mobile version has problems.
On our example, see link in private content section, we have for example links to all events (top of the page) and an event navigation (bottom of the page) and there is a big space between the event and the details.
All this problems where not before the update.
How we can fix this?
Thanks very much.
Best regards
Mike

September 8, 2021 at 1:44 am #1320032
Ismael
Moderator
Hey Michael,

Thank you for the inquiry.

You can use this css code to remove the space below the meta bar on mobile screens.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  #top.tribe-theme-enfold.single-tribe_events .av-single-event-meta-bar-inner {
    display: block; 
  } 
}
```
Best regards,
Ismael
September 8, 2021 at 9:39 am #1320084
YourChoice Informatik GmbH
Participant
Hi Ismael
The space between the event data and the details is still there with this code.
And how we can remove or change the following things:
- Link to all events at the top of the event (“Alle Veranstaltungen”)
- Links for Google Calendar and iCal export (looks not very nice)
- Event navigation at the bottom of the event
All this things were not there before the update… ;-(
Thanks very much.
Best regards
Mike
September 9, 2021 at 3:29 pm #1320271
Yigit
Keymaster
Hi Mike,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab
```
.responsive .tribe-events-back {
    display: none;
}
.responsive .tribe-events-cal-links .tribe-events-gcal, .responsive .tribe-events-cal-links .tribe-events-ical {
    padding: 5px;
}
.responsive .tribe-events-single .tribe-events-sub-nav a {
    background: transparent;
    color: black;
}
.responsive .tribe-events-single .tribe-events-sub-nav li {
    background: #d10a10;
    padding: 10px;
    margin-right: 20px;
}
```
Best regards,
Yigit
September 9, 2021 at 7:10 pm #1320301
YourChoice Informatik GmbH
Participant
Hi Yigit
This css codes did not change anything, looks still ugly ;-(
Still the following problems:
- To many space between the data and details
- Link to all events at the top of the event (“Alle Veranstaltungen”) should not be there
- Links for Google Calendar and iCal export looks not very nice
- Event navigation at the bottom of the event should not be there
Would this be fixed in a later Enfold release for that The Events Calendar and Enfold work fine together again?
Best regards
Mike
September 10, 2021 at 3:13 pm #1320413

Yigit
Keymaster

Hi Mike,

Could you please go to Enfold theme options > Performance and disable CSS file merging and compression, save theme options, clear cache and check if that helps? CSS code does not seem to be applying at the moment :)

If that does not help, please create temporary admin logins and post them here privately so we can look into it.

Best regards,
Yigit

October 4, 2021 at 3:30 pm #1323476
YourChoice Informatik GmbH
Participant
Hi Yigit
Sorry, for my late answer.
So, now it is very special.

When I disable “CSS file merging and compression”, it looks nice on the mobile view… but it looks also nice without your CSS code… how this could be ???

The only thing that does not looks nice then is the missing space between the two buttons at the bottom of the event (calendar) and the missing space between the map and the event venue.

When I enable “CSS file merging and compression”, it looks ugly at all, with and without your CSS code…
So, my questions are:
- Why I must disable “CSS file merging and compression” for that The Events Calendar looks nice on mobile?
- Why there is needed CSS code for that The Events Calendar looks nice on mobile? Before the update it looked also nice without CSS code
- Why there are such troubles with Enfold and The Events Calendar now?
- Could you add CSS code for having the missing spaces between the buttons, map and event venue as a fix in Enfold?
In the private content section you find login data and examples.

Thanks very much.

Best regards
Mike
October 5, 2021 at 3:06 pm #1323657
Yigit
Keymaster
Hi Mike,

Thanks for the information.

I have found 3 CSS errors in Quick CSS field and fixed them and then enabled CSS file merging and compression option and confirmed that layout still looked fine on mobile. I believe the issue was related to broken CSS.

1- I have added following code to bottom of Quick CSS field to increase the space between the map on mobile
```
#top.tribe-theme-enfold.single-tribe_events .secondary .tribe-events-meta-group {
    margin-top: 20px;
}
```
2- However I am unable to reproduce the space issue between the buttons. They look fine on my end. I attached a screenshot in private content field below. If this is not what you meant, could you please post a screenshot and show so we can make sure that we are on the same page? :)

Best regards,
Yigit
October 19, 2021 at 9:38 am #1325534

YourChoice Informatik GmbH
Participant

Hi Yigit
It looks nice now on the mobile.
Can you please tell me, what kind of errors (3 errors) you found in the Quick CSS field? It’s only for learning ;-)
Thanks very much.
Best regards
Mike

October 19, 2021 at 10:20 am #1325538

YourChoice Informatik GmbH
Participant

Hi Yigit
Sorry, it’s me again.
The buttons still do not look nice on mobile browsers.
The screenshots in the private content section are made with a Samsung Galaxy S20 with the Chrome Browser.
Best regards
Mike

October 20, 2021 at 11:56 am #1325706

Yigit
Keymaster

Hi Mike,

1- Sorry but I did not note them. You can use this website – http://csslint.net/ to check for errors in your CSS though :)

2- I checked both sites on my iphone on both Safari and Chrome however buttons show up fine on my end. I attached a screenshot in private content field below. I will ask my teammates to check your website on Android :)

Best regards,
Yigit

October 20, 2021 at 11:59 am #1325707

YourChoice Informatik GmbH
Participant

Hi Yigit
Ok, thanks for the Link ;-)
Yes, would be nice, if you can ask your teammates to check on Android ;-)
Best regardds
Mike

October 20, 2021 at 11:59 am #1325708

YourChoice Informatik GmbH
Participant

Hi Yigit
Ok, thanks for the Link ;-)
Yes, would be nice, if you can ask your teammates to check on Android ;-)
Best regards
Mike

October 20, 2021 at 12:23 pm #1325710

Rikard
Keymaster

Hi Mike,

I checked on a Samsung Galaxy A31 and Chrome, but I can’t see any problems on my end either. Please check screenshots in private.

Best regards,
Rikard

October 20, 2021 at 2:29 pm #1325744

YourChoice Informatik GmbH
Participant

Hi Rikard
Ok, special.
I checked also with a Samsung Galaxy S9, same problem as with the Samsung Galaxy S20.
I also checked with the only Apple device I have, an iPod touch (6th generation), there is the same problem.
Anayway, is there any CSS code possible, for that the buttons have a space between, if they cannot be display on the same line?
Best regards
Mike

October 21, 2021 at 6:23 am #1325795
Rikard
Keymaster
Hi Mike,

If you want to display them full width on mobile, then please try this in Quick CSS:
```
@media only screen and (max-width: 767px) {
.tribe-events-cal-links .tribe-events-button {
    width: 100%;
    margin-bottom: 10px;
}
}
```
Best regards,
Rikard
October 21, 2021 at 11:43 am #1325843

YourChoice Informatik GmbH
Participant

Hi Rikard
Thanks. This works.
I think we will use it like this, so it works on all devices.
I still do not understand why we have this lot of problems with The Events Calendar and Enfold since the last The Events Calendar updates… all this CSS code was not neccessary before this The Events Calendar update… or is Enfold not anymore compatible with The Events Calendar?
Best regards
Mike

October 21, 2021 at 12:55 pm #1325854

Rikard
Keymaster

Hi Mike,

We can’t answer that since we can’t even reproduce the results you are getting on our end. If the CSS I sent works, then please use it.

Best regards,
Rikard

October 21, 2021 at 1:56 pm #1325878

YourChoice Informatik GmbH
Participant

Hi Rikard
Okey, no problem. We will use this CSS code now.
You can close this issue.
Best regards.
Mike
Author

Posts

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘The Events Calendar Mobile View special’ is closed to new replies.