Support

Home Forums Event Espresso Premium Event text disappears when the browser width is narrow

Event text disappears when the browser width is narrow

Posted: May 22, 2014 at 10:10 am


Emily Ruff

May 22, 2014 at 10:10 am

Event text is not displayed on narrow browsers, such as Android phone. Can be replicated in PC and Mac by modifying browser width manually.

Some technical investigation from our developers:
The root cause seems to be in the CSS: span.fc-event-title (the white title text) has a min-width: 481px media query
Maybe the span is not showing whenever the browser is narrower than 481px
The suspected CSS part is attached.

WordPress Version:
3.9.1
PHP Version:
5.3.2-1ubuntu4.18
MySQL Version:
5.5.30
Event Espresso Version:
3.1.36.5.P
WordPress Address (URL):
http://www.holisticlivingschool.org


Lorenzo Orlando Caum

  • Support Staff

May 22, 2014 at 10:20 am

Hello,

On what page can we see this issue?


Lorenzo


Emily Ruff

May 22, 2014 at 10:22 am

Sorry, it looks like my links information cut off at the bottom.
http://www.holisticlivingschool.org/classes/events/


Lorenzo Orlando Caum

  • Support Staff

May 22, 2014 at 10:54 am

Are you referring to the calendar text?

http://cl.ly/image/0o0p1y1w0U16


Lorenzo


Emily Ruff

May 22, 2014 at 10:56 am

Yes.


Lorenzo Orlando Caum

  • Support Staff

May 22, 2014 at 11:14 am

Hello,

The calendar doesn’t have any room to display the information after a certain width.

If it were to display, what would it look like to you?


Lorenzo


Josh

  • Support Staff

May 22, 2014 at 11:29 am

Hi Emily,

It turns out that this is intentional. The text is set to not display on smaller screens because it does not fit on the calendar. You’re more than welcome to remove the media query from the calendar stylesheet or override in another stylesheet.

You might want to preview what the text looks like first though. Here’s a screenshot of your calendar on a narrow window with the media query disabled.


Emily Ruff

May 22, 2014 at 11:31 am

Thanks Josh. I will talk it over with the team and explore if the override would work best. I appreciate your quick reply!


Emily Ruff

May 23, 2014 at 10:28 am

Hi Josh et al,
It seems a real pain that *all Android users* are effected thru the site. I wonder if Event Espresso could reduce the minimum restriction to make sure Android users still see some text. (it’s a matter of tweaking a number < 481 px ) I would assume we need not to worry about PC, because it is rare a PC user browses internet so narrowly 😉

Normally the CSS will automatically re-arrange text onto multiple lines, like “Tai Chi Chuan” onto 3 lines, one word each. It is okay cut off, say Chuan gets displayed just “Chu”, as long as the beginning of the words are shown.

Is this something that can be addressed internally by the company to that all users can benefit? I have multiple EE sites and may add more in the future. It would be nice for my responsive format to be truly responsive with EE main features accessible on all phone browsers.

Thank you!


Josh

  • Support Staff

May 23, 2014 at 2:47 pm

Hi Emily,

You’re more than welcome to tweak that 481 number and even remove the display:none rules. Those styles can be removed from the calendar’s stylesheet, or even overridden in another stylesheet. What’s there now is what we found to work the best across the many devices and themes we tested this with, but your experience may vary.

The support post ‘Event text disappears when the browser width is narrow’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso