Changing Font size in Events from Location

When I create a link to Events from Location the header text is too big to fit all the text that Events Booking wants to display, e.g. "Events from location : Downton, Memorial Hall[View Map][Get Directions]"

How can I change the title text to another smaller font, e.g. <h2> or <h3> tag? As you can see below the default seems to be <h1>:

<h1 class="eb-page-heading">Events from location : Downton, Memorial Hall<a href="/beginners-classes/downton-memorial-hall/view-map?tmpl=component&amp;format=html" title="Downton, Memorial Hall" class="eb-colorbox-map view_map_link cboxElement">[View Map]</a><a class="view_map_link" href=" maps.google.com/maps?f=d&daddr=50.992766,-1.753685 (Downton Memorial Hall , The Borough, Downton, Salisbury, Wiltshire, SP5 3NB, United Kingdom)" target="_blank">[Get Directions]</a></h1>

You’ll want to leave the h1 tag there as search engines interpret it as the most important heading and will rank it higher with potential search matches. What you DO want to do is write a new CSS rule set in [ backend admin > Event Booking > Configuration > Custom CSS ] to decrease the size (which is likely set by your site template at this point).

Try something like this and adjust the value as required:

I’ll need to add an additional selector befor that h1 so that it doesn’t mess with the rest of your site, but need to get to my computer to decide what the selector needs to be (on my cell right now). Try the above for now and I’ll make a second post soon.

Hmmm.... At present, it looks like there is no way to target just that h1 within just that page layout.

If your site is live, could you post a link to this EventBooking Location page? My site's template adds the component name to the page's body tag so I can target it on my site... so maybe your's does too?

Thanks for the suggestion - link to the location page is:
www.longwatertaichi.co.uk/beginners-clas...ownton-memorial-hall
The site is currently managed by a joomlaplate Template but I had this issue with fonts with my old template too.

BTW you might notice that all the other pages display headings with a correctly sized font, e.g. home page title.

Your template's theme.css is setting h1 {font-size:46px; line-height:58px;}, as compared to the h2 which is used for the event titles (and other places on your site, too) which is set as h2{font-size:32px; line-height:40px;} in theme.css, with EB overriding h2{line-height:nonmal;}

To make the h1 match the h2 (and, yes Tuan did make the h1 somewhat targetable with the class he included... which I miss before!), add the following to your [ EB Config -> Custom CSS ]:
Tweak the values as necessary.

@Tuan: Other pages have a wrapping <div> with a unique class attached, but the location pages seem to not have it. Would you consider adding a <div class="eb_location_LAYOUTNAME"> (for example) to these pages too? Thanks

Brilliant - thank you! Worked a treat.

You're welcome
I think I would also apply a second CSS ruleset to reduce the size of the "View Map" and "Get Direction" links and add some additional space between the elements:
Which produces:


@Tuan: Another suggestion. Should the VIEW MAP and GET DIRECTION links be removed from the <h1> element? It's not really part of the page title/heading. The whole heading block could be <div class=...> wrapped so that the links can be styled easier, and the header block stays together.

@Tuan: Also, consider <span> wrapping either the "Events from location:" (and remove the extra space before the ":" or the location name so that the "Events from location:" part can be styled differently than the location name.

Thanks @James. Normally, there would be a div with css class eb-container surround the page. Look like I forgot to do that in location page, will look at it and change it in next release. Will also look at your suggestions as well

Tuan

Even better re the links - I was wondering about that too but not enough to make a fuss. Thanks again James.