How to make responsive this code - css

Question

my problem is this code that does not work when I make it responsive.. I know to change height and width must transform in percentage but this code is damaged when I make it responsive ..
This code *Css ( which I want to transform it into responsive ) :
#import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.entry{
width:430px;
position: RELATIVE;
top:600PX;
LEFT: 5PX;
margin:50px auto;
border-radius:50%;
float:left;
}
.container{
width:110px;
height:110px;
margin:0 0 30px 10px;
position:relative;
border-radius:60px;
background:rgba(255,255,255,.2);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
transition:all .5s;
overflow:hidden;
}
.photo{
width:90px;
height:90px;
margin:8px;
border-radius:50%;
position:absolute;
left:0px;
overflow:hidden;
border:2px solid white;
}
.pic{ max-width:100%; }
.button{
width:60px;
height:60px;
position:absolute;
right:20px;
top:25px;
font-size:40px;
text-align:center;
line-height:60px;
border-radius:50%;
color:rgba(255,255,255,.8);
background:green;
background:linear-gradient(bottom,#5ca321,#8ab24f);
box-shadow:0 0 0 1px rgba(0,0,0,.2),
0 0 0 5px rgba(255,255,255,.1),
0 0 0 6px rgba(0,0,0,.2);
transition:all .5s;
cursor:pointer;
}
.button:hover{
background:#5ca321;
box-shadow:inset 0 1px 5px rgba(0,0,0,.3);
text-shadow:0px 0px 5px gray;
}
.name{
height:60%;
width:180px;
position:absolute;
right:80px;
padding:20px;
font:25px arial;
color:white;
opacity:0;
transition:all .5s .5s;
text-shadow:0 0 5px rgba(0,0,0,.5);
}
.small{ font-size:14px; display:block; margin-top:10px; }
.comment{
width:370px;
position:relative;
padding:15px;
font-size:16px;
color:rgba(0,0,0,.7);
border-radius:10px;
background:rgba(255,255,255,.4);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
opacity:0;
transition:all 1s;
}
.comment:before{
content:'';
width:0;
height:0;
position:absolute;
bottom:100%;
left:2%;
border-bottom:15px solid rgba(255,255,255,.4);
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:15px solid transparent;
}
.container:hover{ width:400px; }
.container:hover .name,.container:hover + .comment{
opacity:1;
}
Maybe you need look demo
https://codepen.io/GARDFIELD3/pen/zNgmMP
I want to do this responsive that size and position Thank and ignore my mistakes of speech but i I do not speak English :)

Answer 1

It's not responsive because you don't have media queries in your CSS. As of right now, your code will run regardless of screen size, but let's say you wanted to look differently on a mobile phone, then you would do something like this:
#media screen and (max-width: 420px) {
/* put in different CSS code here */
}

Answer 2

You need to use media queries and target whichever element you want to change.
For example:
#media screen and (min-width: 767px) {
.entry {
margin-top: 100px;
}
}
This will add a margin-top of 100px to your .entry class for screens with a width equal to or bigger than 767px.
Read more/take a tutorial as an introduction.

Answer 3

Is this closer to what you want to achieve?
I've set the width of comment and entry to 100% because you probably want both div-tags to expand to the full width of the document.
Though it's true that the width will be relative to the document, this doesn't mean that any of this is responsive design. Responsive design keeps the viewport in regard. Try googling that. It's highly unlikely that there are no tutorials available in your language.
#import url(http://weloveiconfonts.com/api/?family=entypo);
#media screen and (max-width: 420px) {
/* entypo */}
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.entry{
width:100%;
position: RELATIVE;
top:60PX;
LEFT: 5PX;
margin:50px auto;
border-radius:50%;
float:left;
}
.container{
position:relative;
width:110px;
height:110px;
margin:0 0 30px 10px;
border-radius:60px;
background:rgba(255,255,255,.2);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
transition:all .5s;
overflow:hidden;
}
.photo{
width:90px;
height:90px;
margin:8px;
border-radius:50%;
position:absolute;
left:0px;
overflow:hidden;
border:2px solid white;
}
.pic{ max-width:100%; }
.button{
width:60px;
height:60px;
position:absolute;
right:20px;
top:25px;
font-size:40px;
text-align:center;
line-height:60px;
border-radius:50%;
color:rgba(255,255,255,.8);
background:green;
background:linear-gradient(bottom,#5ca321,#8ab24f);
box-shadow:0 0 0 1px rgba(0,0,0,.2),
0 0 0 5px rgba(255,255,255,.1),
0 0 0 6px rgba(0,0,0,.2);
transition:all .5s;
cursor:pointer;
}
.button:hover{
background:#5ca321;
box-shadow:inset 0 1px 5px rgba(0,0,0,.3);
text-shadow:0px 0px 5px gray;
}
.name{
height:60%;
width:180px;
position:absolute;
right:80px;
padding:20px;
font:25px arial;
color:white;
opacity:0;
transition:all .5s .5s;
text-shadow:0 0 5px rgba(0,0,0,.5);
}
.small{ font-size:14px; display:block; margin-top:10px; }
.comment{
width:100%;
position:relative;
padding:15px;
font-size:16px;
color:rgba(0,0,0,.7);
border-radius:10px;
background:rgba(255,255,255,.4);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
opacity:0;
transition:all 1s;
}
.comment:before{
content:'';
width:0;
height:0;
position:absolute;
bottom:100%;
left:2%;
border-bottom:15px solid rgba(255,255,255,.4);
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:15px solid transparent;
}
.container:hover{ width:100%; }
.container:hover .name,.container:hover + .comment{
opacity:1;
}
<div class="entry">
<div class="container">
<div class="button entypo-chat"></div>
<div class="name">CoStY
<span class="small">Fondator</span>
</div>
<div class="photo">
<img src="https://s12.postimg.org/pptidy8kd/14021445_1166695373388266_6290547632102759142_n.jpg" alt="" class="pic">
</div>
</div>
<p class="comment">Salut, numele meu este Enache Constantin si sunt creatorul acestei comunitati :) Puteti sa ajutati la intretinerea comunitatii printr-o donatie ,pm pentru detalii :) </p>
</div>
<div class="entry">
<div class="container">
<div class="button entypo-chat"></div>
<div class="name">Gardfield<3
<span class="small">Administrator</span>
</div>
<div class="photo">
<img src="http://farm1.staticflickr.com/133/378977890_40f31e1962_q.jpg" alt="" class="pic">
</div>
</div>
<p class="comment">Salut,numele meu este Alexandru Mihai iar misiunea mea este sa dezvolt aceasta comunitate din toate punctele de vedere. Sunt deschis la orice colaborare si ma puteti contacta pentru probleme tehnice printr-un pm :) </p>
</div>