Forums - View Thread - Responsive image in popup?

Welcome Guest | Login

Index | Recent Threads | Register |

Forums » List all forums » Forum: General Discussion » Thread: Responsive image in popup?

Quick Go »

Thread Status: Normal
Total posts in this thread: 2

[Add To My Favorites] [Watch this Thread] [Post new Thread]

Author

This topic has been viewed 501 times and has 1 reply

CreativeImaginations
New Member

Joined: Mar 15, 2019
Posts: 2
Status: Offline

Responsive image in popup?

Reply to this Post
Reply with Quote

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.

[Mar 20, 2019, 8:10:09 PM]

[Link]

support
localendar Expert

Joined: Aug 9, 2022
Posts: 6437
Status: Offline

Re: Responsive image in popup?

Reply to this Post
Reply with Quote

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

[Mar 25, 2019, 9:19:19 PM]

[Link]

[Show Thread Printable Version] [Post new Thread]