Image Ratio 16:9 on main view

[kanaka (Jamison Aweau)]

Hi,

100% of my events, along with events on other platforms like eventbrite etc. are 16:9 ratio of event images - is there a temporary CSS Code I can add to show the full width image on the main view (not popup view). I’m using the template in the screenshot

Additionally, is there a way to adjust the font sizes for mobile specifically? My Heading font is 41px to match my website’s Headings but the mobile view does not change and it looks really large. Thank you!

[Max]

Hi there, @kanaka

Here is a CSS code to change the size of the title on mobile:

@media (max-width: 500px) {
.eapp-events-calendar-events-calendar-title {
  font-size: 15px;
}
}

As for the iimage ratio, I’ve forwarded your request to the devs and will update you tomorrow

[kanaka (Jamison Aweau)]

@Max

@media (max-width: 500px) {
.eapp-events-calendar-events-calendar-title {
  font-size: 15px;
}
}

Thank you!

[kanaka (Jamison Aweau)]

BTW, this is more of an overall feature request but was wondering if you could give me a temporary solution.

Overall request: Allowing more customization for mobile view

Temp fix would be to get these all to line up - Date to left of image, everything else is okay

[Max]

You’d like to have an option in the settings to control the font size of ell element on mobile devices, right?

Regarding, the temporary solution, you’d like only to display the date on the left of the images, like on desktop, is that correct?

[Max]

Here is the CSS code for changing the image width:

.eapp-events-calendar-list-item-imageContainer {
  aspect-ratio: 16 / 9;
  height: auto !important;
  width: 100px !important;
}

Give it a try and let me know if you like the result

[kanaka (Jamison Aweau)]

Hmm, sorry for any confusion - for all views (desktop and mobile), i was looking for the 16:9 on the event images in the list view.

For mobile specifically, I was looking to have the date the is normally above the image, changed to the left of the image

[kanaka (Jamison Aweau)]

I believe the code you provided only applied the 16:9 ratio on mobile only

[Max]

The code didn’t work for desktop because you’ve added it inside the media tag, which is responsible for the mobile view:

However, if you add it right after the 1st code, it will work fine. I’ve saved the changes in the widget:

As for the date display on mobile, I’ve shared this request with the devs and will get back to you on Monday

[kanaka (Jamison Aweau)]

Looks great, and thanks for always been on top of it on all of these requests. Elfsight needs to hook my man Max up with a raise!!

[Max]

Glad to hear that it’s worked and a huge thank you for your kind words