According to Coffeecup Support, Web Calendar is not in and of itself responsive. They suggested that the means to make it so is in the forum, but gave no indication of where to find it, nor what to search on. Not being familiar with Coffeecup's software beyond using a few items, I guess the best way to approach this is to ask for help from the forums to either guide me to the proper area where discussions would give me the information I need, or:
Hope that someone can explicitly tell me how to make the calendar responsive in this thread.
Please?
Eugene Humbert
Web Calendar and Responsive Design
Eugene Humbert
Registered User
1 post
paintbrush
Ambassador
3,816 posts
I just had a look at the calendar code. I think I'd go with a ready-made responsive calendar rather than try to alter all that.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Steve
Senior Advisor
3,086 posts
I use Google Calendar
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Webmaster
Ambassador
21 posts
Hi Steve,
Do you have a website that you can direct me to wherein you use a Google Calendar?
Is it responsive?
If so, how did you get ot responsive?
Do you have a website that you can direct me to wherein you use a Google Calendar?
Is it responsive?
If so, how did you get ot responsive?
Steve
Senior Advisor
3,086 posts
Hey Webmaster,
I have used a google calendar for this website http://ccfccregina.ca/calendar.html
If you look at my custom.css you will find:
Just wrap the calendar up in a div class=calendar-container and a smaller one in div class=calendar-container-small
I have used a google calendar for this website http://ccfccregina.ca/calendar.html
If you look at my custom.css you will find:
.calendar-container {
position: relative;
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.calendar-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 55%;
}
.calendar-container-small {
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
}
.calendar-container-small iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
position: relative;
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.calendar-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 55%;
}
.calendar-container-small {
position: relative;
padding-bottom: 100%;
height: 0;
overflow: hidden;
}
.calendar-container-small iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Just wrap the calendar up in a div class=calendar-container and a smaller one in div class=calendar-container-small
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Neil Ross
Registered User
1 post
Hi Steve
That calendar scaling looks absolutely perfect - but I'm sorry my coding skills are lacking!! I can cut and paste the 'embed' link from Google Calendar but I don't understand how to wrap it and to link it with your code - any help would be much appreciated. Many thanks - Neil
That calendar scaling looks absolutely perfect - but I'm sorry my coding skills are lacking!! I can cut and paste the 'embed' link from Google Calendar but I don't understand how to wrap it and to link it with your code - any help would be much appreciated. Many thanks - Neil
Brian Durfee
Senior Advisor
1,095 posts
First, set up your css. There are two ways. (1) If you have a stylesheet already set up, you can simply add Steve's code above to the stylesheet. (2) If you do not have a stylesheet, you can put the code in the <head> section of the web page.
<head>
<style>
<!-- Replace this line with what Steve has above -->
</style>
</head>
To "wrap" code, you just surround it with a <div> and </div>. You need to tell the <div> how to behave so you give the div a css class (which you set up above).
Wherever you want the larger calendar to appear:
<div class="calendar-container">
<!-- Google code goes here -->
</div>
Wherever you want the smaller version of the calendar to appear:
<div class="calendar-container-small">
<!-- Google code goes here -->
</div>
Assuming you are using RSD, for the larger breakpoints, you set the div that contains the small version to display:none. For the small breakpoint, you set the div that contains the larger version to display:none and change the small one to display:block.
<head>
<style>
<!-- Replace this line with what Steve has above -->
</style>
</head>
To "wrap" code, you just surround it with a <div> and </div>. You need to tell the <div> how to behave so you give the div a css class (which you set up above).
Wherever you want the larger calendar to appear:
<div class="calendar-container">
<!-- Google code goes here -->
</div>
Wherever you want the smaller version of the calendar to appear:
<div class="calendar-container-small">
<!-- Google code goes here -->
</div>
Assuming you are using RSD, for the larger breakpoints, you set the div that contains the small version to display:none. For the small breakpoint, you set the div that contains the larger version to display:none and change the small one to display:block.
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
Dale Sinstead
Registered User
2 posts
Hello Steve and or Brian, I'm struggling with this as well. Do we need to export the project first and edit the resulting code to edit the CSS? Do we define the break points ahead of that process? I'm relatively new to RSD and am trying to learn and understand the necessary concepts at the same time.
The calendar I'm trying to make responsive is: http://www.kidyco.ca/bwc/calendar.html Any support or guidance would be greatly appreciated.
The calendar I'm trying to make responsive is: http://www.kidyco.ca/bwc/calendar.html Any support or guidance would be greatly appreciated.
Scott Swedorski
VP of Software Development
0 posts
Dale Sinstead wrote:
Hello Steve and or Brian, I'm struggling with this as well. Do we need to export the project first and edit the resulting code to edit the CSS? Do we define the break points ahead of that process? I'm relatively new to RSD and am trying to learn and understand the necessary concepts at the same time.
The calendar I'm trying to make responsive is: http://www.kidyco.ca/bwc/calendar.html Any support or guidance would be greatly appreciated.
Hello Steve and or Brian, I'm struggling with this as well. Do we need to export the project first and edit the resulting code to edit the CSS? Do we define the break points ahead of that process? I'm relatively new to RSD and am trying to learn and understand the necessary concepts at the same time.
The calendar I'm trying to make responsive is: http://www.kidyco.ca/bwc/calendar.html Any support or guidance would be greatly appreciated.
You can make the Google calendar responsive, but it requires adding some custom CSS to the HEAD section. Don't worry, it is pretty painless.
To set this up, first, for HTML element that you added the calendar to, give it a class name of "calendar." Then go to the Settings pane and in the head section, paste in this markup:
<style>
.calendar{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.calendar iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
.calendar{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.calendar iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
That is all you have to do. Attached is a sample project that has this all setup.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
Dale Sinstead
Registered User
2 posts
Thank you Scott! That was all I needed 
I had already assigned a class name so I used that in the CSS. I hit a bit of a snag at first then realized that the class name, when referenced in the CSS, is case-sensitive Including a working sample project was a great help.
Cheers!
I had already assigned a class name so I used that in the CSS. I hit a bit of a snag at first then realized that the class name, when referenced in the CSS, is case-sensitive
Including a working sample project was a great help.Cheers!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
