Hide ALL small table fields on Mobile?

  • Stephan Hodges
  • Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
5 years 3 months ago #121394 by Stephan Hodges
Hide ALL small table fields on Mobile? was created by Stephan Hodges
I would like to hide all the fields such as "Event Start Date" "Individual Price", "Location", that appear in the small table before or to the right of the event description. I only really want to hide them when looking from a phone, but always hiding would probably be better.

We can put all the information from that small table into the actual event description and control formatting more easily.

I found how to hide most of the fields, but cannot find how to hide "Event Start Date" and "Individual Price".

I also tried searching for this on the forum and read some discussions, but didn't find this information.

hymcillinois.com/programs/workshops

Please Log in or Create an account to join the conversation.

More
5 years 3 months ago #121395 by Tuan Pham Ngoc
Replied by Tuan Pham Ngoc on topic Hide ALL small table fields on Mobile?
Hello Stephan

We don't have a config option to allow hiding these information at the moment. So if you want to hide it completely, some small modification to the layout will be needed

You can submit a support ticket sending us super admin account of the site and link to the page. Our support staff can help with this modification

Regards,

Tuan

Please Log in or Create an account to join the conversation.

  • Stephan Hodges
  • Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
5 years 2 months ago #121694 by Stephan Hodges
Replied by Stephan Hodges on topic Hide ALL small table fields on Mobile?
Thanks. I missed your reply and just now saw it.

Please Log in or Create an account to join the conversation.

More
5 years 2 months ago - 5 years 2 months ago #121716 by James Riley
Replied by James Riley on topic Hide ALL small table fields on Mobile?
Your site doesn't appear to use a responsive template (I could get a mobile site layout to show up on my desktop browser set to mobile size)... but you can force the Event Properties table to move under the description when viewed on a smaller-that-large-desktop-sized screen by entering this CSS rule-set into [ Jooma Admin -> Event Booking -> Configuration -> Custom CSS tab -> Custom CSS box ]
Code:
@media (max-width: 980px) { div.eb-event-properties-table{clear:both !important;} }

The 980px seemed to be the correct value for your site when I tested it. Adjust the value as necessary.
On a fully responsive template, I would use this rule-set to expand the event description to full width (note the smaller "max-width" too):
Code:
@media (max-width: 535px) { div.eb-event-properties-table{clear:both !important;} div.eb-description-details{width:100% !important;} }

If you'd still rather completely hide the table, change the above "clear: both !important;" to "display:none !important;", but you'll loose the date for your event...

James Riley .: EventBooking user since 2014 ::: JoomDonation user since 2016 :.
.: grfx & web design / IT / AV @ St. Therese Institute of Faith and Mission, Bruno, SK, Canada :.
Last edit: 5 years 2 months ago by James Riley.

Please Log in or Create an account to join the conversation.

Moderators: Tuan Pham Ngoc