I'm currently working on the layout of a website that features a slideshow of images at the top, followed by an embedded Google Calendar. I've encountered an issue with the responsiveness of the Google Calendar within its designated div container.
After experimenting with different solutions, I realized that I can either make the Google Calendar responsive or properly aligned within its div, but not both simultaneously.
One crucial detail I discovered is that in order to achieve responsiveness for the calendar, the iframe must be enclosed within a div class as shown in the tutorial I followed. Attempting to use a div id instead resulted in the calendar losing its responsiveness.
Image showing Google Calendar responsive but misaligned
Image displaying Google Calendar properly aligned but unresponsive
I suspect that the current structure of the code may be causing this issue. Can anyone clarify whether it's acceptable to place a div inside an article element?
Below is the HTML code snippet:
<!-- Right Section -->
<div class="col span_2_of_3">
<!-- Events -->
<article class="events">
<h2>UPCOMING EVENTS</h2>
<div id="slider">
<figure>
<a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/vstories.jpg" alt=""></a>
<a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/WeeklyEvents-01.jpg" alt=""></a>
<a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/STEM4GIRLS.jpg" alt=""></a>
<a href="http://wrrc.ucdavis.edu/community.html"><img src="../images/slide00.jpg" alt=""></a>
</figure>
</div>
<!-- <button>VIEW CALENDAR</button> -->
</article>
<!-- Google Calendar -->
<article class="calendar">
<div class="responsive-iframe-container">
<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&src=wrrcdavis%40gmail.com&color=%2323164E&ctz=America%2FLos_Angeles" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no" position="relative"></iframe>
</div>
</article>
</div>
Here is the CSS stylesheet:
/*Columns*/
.col {
display: block;
float:left;
margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */
.span_2_of_3 {
width: 66%;
min-height: 500px;
height:auto;
}
.span_1_of_3 {
width: 32%;
min-height: 500px;
height:auto;
}
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_2_of_3, .span_1_of_3 { width: 100%; }
}
.calendar{
border-top: none;
list-style: none;
margin-top: 100px;
margin-bottom: 50px;
padding-left: 0;
text-align: center;
width: 100%;
}
.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}