Как сделать отзывчивым этот код

Question

моя проблема - это код, который не работает, когда я делаю его отзывчивым .. Я знаю, что изменение высоты и ширины должно трансформироваться в процентах, но этот код поврежден, когда я делаю его отзывчивым ..

этот код * Css (который я хочу, чтобы превратить его в отзывчивый):

@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; 
} 

Может быть, вам нужно выглядеть демо https://codepen.io/GARDFIELD3/pen/zNgmMP Я хочу, чтобы это сделать соотв onsive, что размер и позиция Спасибо и проигнорируйте мои ошибки речи, но я не говорю по-английски :)

Answer 1

Это не отзывно, потому что у вас нет медиа-запросов в вашем CSS. По состоянию на сейчас, ваш код будет работать независимо от размера экрана, но давайте скажем, вы хотите выглядеть по-разному на мобильный телефон, то вы могли бы сделать что-то вроде этого:

@media screen and (max-width: 420px) { 

    /* put in different CSS code here */ 

} 

Answer 2

Вы должны использовать медиа-запросы и цели какой бы элемент вы хотите изменить.

Например:

@media screen and (min-width: 767px) { 
.entry { 
    margin-top: 100px; 
} 
} 

Это добавит маржин-верх 100px к вашему .entry класса для экранов с шириной, равной или большей, чем 767px.

Read more/take a tutorial в качестве введения.

Answer 3

Это ближе к тому, чего вы хотите достичь?

Я установил ширину comment и entry на 100%, потому что вы, вероятно, хотите, чтобы оба div-тега расширялись до полной ширины документа.

Хотя это правда, что ширина будет относиться к документу, это не означает, что любой из них responsive design. Отзывчивый дизайн держит viewport в отношении. Попробуй погулять. Очень маловероятно, что на вашем языке нет учебников.

@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_2759142_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>