Forums - Print Thread - Responsive image in popup?

Forums » List all forums » » Forum: General Discussion » » » Thread: Responsive image in popup?
Print at Aug 22, 2025, 10:01:31 AM

Posted by CreativeImaginations at Mar 20, 2019, 8:10:09 PM

Responsive image in popup?
Is there a way to make the image in the pop-up description be responsive? So that it gets smaller as the popup is re-sized? If not, is there a default size images in the popup should be in order to fit?

To give you an example, the website I'm currently doing for my client is Southern Tier Wireless We are looking at replacing the coming events list with your calendar. In a popup on that page, for example: Plantasia in Paradise as you resize the browser, you'll see the image resizes as well.

In the sample page I'm working on to show them, Creative Imaginations Sample Calendar page, If you go to March 23rd for example, the image doesn't fit in the popup, and that's where I'd like to have it be responsive. I do see that the entire calendar is responsive, but not the popup image.

Also, is there any reason I can't use the Personal subscription for my clients if the options in it are sufficient for their needs? They really don't need the webmaster version.

Can I use our existing css file to change the view? I did find the Custom Calendar CSS page that shows what the classes need to be. It would be easier to include them in our existing file instead of in a "style" section in the page. It would also make life easier if they decide they want the calendar on more than one page.

Thanks in advance.

Posted by support at Mar 25, 2019, 9:19:19 PM

Re: Responsive image in popup?
Generally, yes to everything you said in your post.

Personal subscription: absolutely fine
Your own CSS: Sure - that's why we have the hooks baked in

Now, about those images...
You didn't mention where so let me try a couple of answers...

If you mean on the Event Details popup, then if you add the following CSS under Options->Events, Common Event Information all of your images on the popup will be responsive:

<style>
img {
  height: auto;
  width: 100%;
}
</style>

If you mean on the main calendar (ie month block view) then you can paste the following into either the Calendar Title or Footer fields under Options->General

<style>.m-titlepad img {height: auto;width: 100%; }</style>

In both of these cases, you may find the images are larger than what you want (since they will expand to take up the available space). You can control that by adding max-width. For example, in the latter case:

<style>.m-titlepad img {height: auto;width: 100%;max-width: 50%; }</style>

----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news