OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

My Embedded Google Calendar looks too small on mobile device (Iphone 13 pro)

  • Thread starter Thread starter Tomer Vazana
  • Start date Start date
T

Tomer Vazana

Guest
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:

Code:
        /* 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:

Code:
    <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: calendar on mobile safari browser

It looks like this on google chrome browser: calendar on PC 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?

<p>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.</p>
<p>CSS:</p>
<pre><code> /* 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);
}
</code></pre>
<p>HTML:</p>
<pre><code> <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>
</code></pre>
<p>It looks like this on mobile:
<a href="https://i.sstatic.net/3Kqkv0kl.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3Kqkv0kl.jpg" alt="calendar on mobile safari browser" /></a></p>
<p>It looks like this on google chrome browser:
<a href="https://i.sstatic.net/en5zDbvI.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/en5zDbvI.png" alt="calendar on PC google chrome browser" /></a></p>
<p>As you can see in the pictures above, its easy to see the content on big screen, but not possible on small mobile screen</p>
<p>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?</p>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top