Pure css3 Tabs but not responsive

Hi,
We have a Pure css Tabs with css3 intimations
but need help to be responsive
you can see fiddle here
http://jsfiddle.net/earngate/8jjn4xfg/

Or this is full code
CSS

 
.tabsk2 {
position : relative;
min-height : 200px;
clear : both;
max-width : 99%;
margin : 20px auto 30%;
}
.tabk2 {
float : right;
min-width : 100px;
}
.tabk2:active {
color : #f00;
}
.tabk2 label {
width : 150px;
max-width : 100%;
background-color : #2c3e50;
color : #fff;
font-weight : bold;
cursor : pointer;
overflow : hidden;
padding : 5px 20px;
position : relative;
margin-top : 1em;
transition : 0.5s;
}
.tabk2 label:hover {
background : #08C;
transition : background-color 0.5s 0.1s ease;
}
input[type="checkbox"]:checked + .tabk2 label {
color : #f00;
background : #08C;
font-style : normal;
}
.tabk2 [type="radio"] {
display : none;
height : 100px;
background : #08C;
}
.contentk2 {
position : absolute;
left : 0;
background : white;
right : 0;
direction : rtl;
padding : 15px;
border : #ccc solid 1px;
border-top : 7px solid #08C;
}
.contentk2 > * {
opacity : 0;
}
[type="radio"]:checked ~ label .tabk2, [type="radio"]:checked ~ label {
background : #08C;
color : white;
top : 0;
}
[type="radio"]:checked ~ label ~ .contentk2 {
z-index : 1;
}
[type="radio"]:checked ~ label ~ .contentk2 > * {
opacity : 1;
}
@media only screen and (max-width:480px) {
.tabk22 {
width : 100%;
z-index : 100;
}
.tabk22:last-of-type {
width : 100%;
z-index : 100;
}
.tabk22 label {
display : block;
min-width : 1000px;
margin : 0 auto;
}
.contentk2 {
height : 100%;
}
}

Code (CSS):

################
HTML

<div class="tabsk2">
<div class="tabk2">
           <input class="tabk22" type="radio" checked id="tabk2-19" name="group-tabs" >
           <label class="tabk22" for="tabk2-19"> Too much long Tab #1 Title 1</label>
           <div class="contentk2">
               <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here </p>
           </div>
       </div>
<div class="tabk2">
           <input class="tabk22" type="radio"  id="tabk2-234" name="group-tabs" >
           <label class="tabk22" for="tabk2-234"> Tab #2 Title </label>
           <div class="contentk2">
               <p> Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here </p>
           </div>
       </div>
<div class="tabk2">
           <input class="tabk22" type="radio"  id="tabk2-359" name="group-tabs" >
           <label class="tabk22" for="tabk2-359"> Tab #3 Title  Tab #3 </label>
           <div class="contentk2">
               <p> t Her Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here Add Tab Content Here e </p>
           </div>
       </div>
</div>
  

HTML:

Regards

 

That's completely invalid html, as you have no form-element. Redo it.

 

Here you are, demo of main idea from
css-tricks
https://css-tricks.com/examples/CSSTabs/radio.php

 

Question is what do you want to do for smaller screens? Icon-based, scrolling/swipe tabs? Accordion-style? Wrap the text and fix the width of each tab?

 

Or more importantly, if the developer cares about mobile, why the **** are they doing inaccessible tabbed BS in the first place?!? JUST another case of "It was stupid when done with framesets, was stupid when done using scripttardery, and now that you can use CSS3, GUESS WHAT?!?"