How to embed a Google Calendar in a responsive site

I'm using embedded google calendar on a responsive website and in my opinion it works quite well on a mobile device. Well it works on my LG G3 with Android 5.0 Lollipop.
But there seems to be a problem as I had some complaints from some iPhone users where the calendar would display fine but not populate any actual events.

So, what to do. One solution was brought to my attention where two versions of the calender code is used in two div's. One div for normal view and one div for mobile view and some css to hide or show based on the width of the screen. Yes, it works. But the calender view in this solution looses part of it's functions like the week view. I think it is a bad solution where you "fix" one thing by making it worse for those where it works.

My solution might not be the best in the world, but I'm trying to fix only what is broken. The iPhone view. That's why I use php to find out what device or browser is viewing the page and then I select which calender code I use. And I use a bit from fhe CSS from the other solution.

The main difference is the URL to the calender is "embed" vs. "htmlembed"
Original:

https://www.google.com/calendar/embed?

The fixed version:

https://www.google.com/calendar/htmlembed?

The web page has a Wordpress cms and to use php code on a page or a post we need to install some plugin for that, I choose PHP Code for posts for this job, but you can use anything that works for you.

Here is the code I use to select how I display the calendar

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'ipod'))
 {
 
 ?>
<div class="responsive-iframe-container">
<iframe style="border-width: 0;" src="https://www.google.com/calendar/htmlembed?***"></iframe>
</div>
 <?
}else {
 
 ?>
<div class="responsive-iframe-container-normal">
<iframe src="https://www.google.com/calendar/embed?***"></iframe>
</div>
 <?
}
?>

Here is the CSS I added, it might need some adjustments.

.responsive-iframe-container-normal iframe,   
.vresponsive-iframe-container-normal object,  
.vresponsive-iframe-container-normal embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 400px;
    overflow: hidden;
}
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

If you have any improvement to this or a better method, please feel free to share it here in the comments.

Tag cloud and list layout with css

What I wanted was to style my tags, (labels) which is an unordered list, so the look like the image below.

Tag list

This is a simple unordered list, we need to remowe bullets and make it horizontal.

<ul class="tags">
    <li class="tag">
        <a target="_blank" href="#">css</a>
    </li>
    <li class="tag">
        <a target="_blank" href="#">html</a>
    </li>
    <li class="tag">
        <a target="_blank" href="#">python</a>
    </li>
    <li class="tag">
        <a target="_blank" href="#">Demo</a>
    </li>
</ul>

And here we have the css

ul .tags {
    list-style: none;
}
.tags a, .tags a:visited, .tags a:active{
    color: #ddd;
    border:1px solid #ddd;
    border-radius:5px;
    text-decoration:none;
    padding:3px;
    margin:3px;
    text-transform:uppercase;
    font-size: 1em;
    line-height: 1.2em;
}
.tags a::before{
    content:'#';
}
    
.tags a:hover {
    color: #fff;
    background:#eee;
}

li.tag {
    display: inline;
    list-style-type: none;
}

Perhaps I'll change the layout of the labels in this site to.

--cheers

css for Keyboard input tag kbd

Describing a keyboard shortcut can be done by using the tag <kbd>, it is a phrase tag and defines keyboard input in the browser's default monotype font.
By using css you can make the code look like a key button's

 kbd {
padding: .1em .6em;
border: 1px solid #ccc;
font-size: 10px!important;
font-family: Arial,Helvetica,sans-serif;
background-color: #f7f7f7;
color: #333;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;border-radius: 3px;
display: inline-block;
margin: 0 .1em;
text-shadow: 0 1px 0 #fff;
line-height: 1.4;
white-space: nowrap;
}

Example:

<kbd>ctrl</kbd>+<kbd>p</kbd>

ctrl+p

That looks better.

Side by side DIV

This is one of the things I just can't remember and I have to google it every time. But it is so simple. Side by side DIV.

Here is some css to go with the div

#leftcolumn { width: 300px; border: 1px solid #333333; float: left;}
#rightcolumn { width: 300px; border: 1px solid #333333; float: right;}
.clear { clear: both;}

And for the div's

<div id="leftcolumn"><p>some text here</p></div>
<div id="rightcolumn"> <p>more text here</p></div>
<div class"clear"></div>

Yes, quite simple and next time I know where I find this.