Display the website on a mobile 
Autor: Peter K.I try to show my Google Calendar on a mobile, but i cannot let it show the full size. I have made a seperate site to show the calendar in a iframe.
http://vandrefuglene.dk/mobilvisning.html
The right side cutted off saturday-sunday on the mobile.
In my resulutions an responsive design i have created:
0 px lower than 480px
480px Vievport 4 between 599 px and 480 px
600px viewport 3 between 719 and 600 px
720px Viewport 2 between 839 and 720 px
840px Viewport 1 between 1199 and 840 px
Desktop Biggger than 1200 px
All margins is set to 30.
When i look as my template 0-480px the page width is set to 320 and height 720px, but the width can't be ajusted (the field is locked).
At my smartphone the sites can scroll to the left side, but it is just a white area.
My iframe look like this:
<iframe src="https://calendar.google.com/calendar/embed?showTz=0&
height=600&
wkst=2&
hl=da&
bgcolor=%23FFFFFF&
src=vfuglene%40gmail.com&
ctz=Europe%2FCopenhagen" style="border-width:0" width="480" height="600" frameborder="0" scrolling="no"></iframe>
The value "width="480" is set because then i can see most of the calender.
Another thing it seems strange is that all the sites can scrool the left side on the mobile and the area is white.
Please help me to set the correct values to show in a a mobile.
Peter, I suspect the ability to scroll to the left is caused because you have something in the header (the header graphic?) that is wider than the available space, this should be hidden from lesser resolutions. You should check every resolution, the problem also exists with the 840 break point.
As for the calendar cutting off Sat & Sun, you need to define a suitable width (as well as height) when designing your calendar code to embed in your site. Your width is 480, but anything wider than 400 will get cut off on most phones (and 320 on older phones). To work around this I use AGENDA view and make it narrower to suit mobiles.
Autor
I could resize the menu in the header so then i think that the scroll-problem is OK for the first calendar-page.
I have still problems width 840 breakpoint. If go trough the process to make breakpoints, it don't work - and all the following breakboints is gone. When I just mark it (width the red line), the following breakpoints is OK. This site is OK at the smartphone.
On the mobile-site i have made the calendar Agenda and the width to 400. It stil cut off the text and scrolls.
Can i make vertical elevation? Do you have an idea?
Peter, for the calendar, when getting the embed code click on customise.
Select AGENDA only
When done, set the cell height 20+px > than calendar height
Autor
Thank you for your answer.
The text on my calendar is longer than the screen on the mobiles screen. When I turn around the mobile it is cutted off. Maybe it is the template that blames it?
I have observed that i can make it widhout template in 3. "Make the site widthout template". When i use this and make it with html-code i can scroll it, and if i turn around the mobile i can see the whole calendar.
<div style="overflow:scroll; width:1000px;overflow-x:hidden" >
<table style=" width:1000px" border="0";>
<thead>
<tr>
<th style="width:1000px; text-align:left";> <iframe src="https://calendar.google.com/calendar/embed?showDate=0&showPrint=0&showCalendars=0&showTz=0& mode=AGENDA& height=600&
wkst=2&showTitle=0&src=vfuglene%40gmail.com&hl=dk;ctz=Europe%2FCopenhagen"
style="border-width: 0pt" width="1000" height="600" margin-right="10" frameborder="0" scrolling="no">
</iframe>
</th>
</tr>
</thead>
</table>
</div>
Perhaps this could be done in a better way?
Peter, Google Calendar meets all my requirements (although it would be great if it was responsive).
In view of the fact you cannot design your calendar to be less than 400px, perhaps your could check out LuxCal.
https://helpcenter.websitex5.com/pl/post/152343
http://www.luxsoft.eu/index.php?pge=demos
It is also free.
Hello peter and Esach
I just want to add : The luxCal now is delivered with the displays. The displays is self-contained and is extremely useful on mobiles, and it also looks good in an iframe.
The displays is 100 % responsive.
You could take a look here : http://www.calendarforum.dk/examples.html
Try to scan one or more of the QR-codes and see how it appears in a mobile.
When using the displays you can have your users/members to have a link ( on their mobile - no app to download )to the "naked" display, and this way always have the calender in their pocket. AND it is exactly the same display you can have on your site in an iframe.
Kind regards
John S.