Pure css3 Tabs but not responsive

HTML & CSS
,
1

Hi,
We have a Pure css Tabs with css3 intimations
but need help to be responsive
you can see fiddle here

Regards

2

What do you want to happen? Have you attempted it?

If you are looking for someone to do all the work for you, consider hiring a developer.

Edit- Also you need to validate that CSS. Just scrolling through I notice some invalid crap going on there.

3

We don’t need someone do ( all ) the work for me.
we only need help to fix @media style to appears good on all screens and cross browsers

4

Attempt to do the media queries yourself. Come back to us if/when you have issues (something isn’t working.)

With nothing to debug, you can’t expect us to be able to help you.

5

we came back because we tried media queries ourself, but not work good !!
Need two things only

need labels on small screens to be under of others by clear both or any thing else
and content shown under last tab

6

can u past the code so that we can see how to help you

7

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

   .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%;
}
}

#############
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>
8

Your method is not responsive because it uses absolute positioning which means that is useless for a responsive site as your container needs a height and that height will change depending on the width of the viewport.

This is the way that I would go about it for a fully fluid and responsive site.