I’ve added a Google Calendar to my Portfolio website, it looks OK on PC browser, but when I browse to my website on my Iphone 13 pro it looks too small.
CSS:
/* div of big calendar */
@media (max-width: 550px) {
.big-container {
display: none;
}
}
/* div of small calendar */
@media (min-width: 550px) {
.small-container {
display: none;
}
}
/* Responsive iFrame */
.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%;
}
/* Some design to make it dark */
.small-cal, .big-cal{
filter: invert(.9) saturate(0.5) hue-rotate(145deg);
}
HTML:
<section class="schedule-section" id="schedule">
<div class="container">
<h2>Schedule a meeting</h2>
<div class="schedule-meeting">
<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
(function() {
var target = document.currentScript;
window.addEventListener('load', function() {
calendar.schedulingButton.load({
url: '******',
color: '#039BE5',
label: 'Book an appointment',
target,
});
});
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->
</div>
** <div class="google-calendar">
<div class="responsive-iframe-container big-container">
<iframe class="small-cal" src="******" width="800" height="600" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
</div>
<div class="responsive-iframe-container small-container">
<iframe class="big-cal" src="*****" width="500" height="700" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
</div>**
</div>
</div>
</div>
</section>
It looks like this on mobile:
It looks like this on google chrome browser:
As you can see in the pictures above, its easy to see the content on big screen, but not possible on small mobile screen
At start it was wider then my website, so I’ve added a div with @media (min-width: 550px) so it will scale with smaller screen.
I’ve tried to increase the height of the iframe in the embedding command that I get from Google, but it looks like its not helping, I wanted it to be taller on phone so people could see the content of the calendar, but it doesn’t help and it doesnt make it taller on smaller screen.
Any suggestion how can I make it taller on a smaller mobile screen?