Как адаптировать div на мобильных?

Ankhena W: оба кода попробовал
Так https://jsfiddle.net/on0rr31m/ при mobile first
https://hkar.ru/QtcF
https://hkar.ru/QtcG

второй Так: https://jsfiddle.net/3nqrLn6r/

https://hkar.ru/QtcH
https://hkar.ru/QtcI

вы можете мне ПРОСТО прислать код каким он должен быть.вы же знаете решение и еще в пятницу могли мне его сказать.
все что вы присылаете-это попытки объяснить и научить меня.но мне надо просто код.обучение это важно,но сейчас уменя нет времени убивать недели на это.мне нужен просто код.прошу вас пожалуйста просто пришлите мне код каким он должен быть. я понимаю вы мне хотите объяснить чтобы я сам понял,но я пока не понимаю,а чтобы понять нет времени.пожалуйста просто пришлите мне код

Как адаптировать div на мобильных?

Ankhena W:
можете мне прислать код как должно быть?

box-sizing:border-box;
}
.services {
  display: flex;
   flex-wrap:wrap;
  
}

@media (min-width: 700px) {
  .service-item {
    width: 31%;
    
  }
   
}


   
.service-item {
  position: relative;
  width: 100%; /* Ширина первого слоя */
  height: 350px;
  padding: 10px; /* Поля вокруг текста */
  background: #fff; /* Цвет фона */
  margin: 15px 15px 15px 15px;
  border:1px solid #FF6600;
  
 
}

.service-item::before {
  content:"\f005";
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}
.star-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

что здесь поправить

Как адаптировать div на мобильных?

Ankhena W:

box-sizing:border-box;
}
.services {
  display: flex;
  
}



@media (min-width: 300px){
 
  .service-item {
      width: 31%;
      flex-wrap:wrap;
  }
   
.service-item {
  position: relative;
  width: 100%; /* Ширина первого слоя */
  height: 350px;
  padding: 10px; /* Поля вокруг текста */
  background: #fff; /* Цвет фона */
  margin: 15px 15px 15px 15px;
  border:1px solid #FF6600;
  
 
}

.service-item::before {
  content:"\f005";
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}
.star-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

вот так на компе отлично но на мобилке опять ужас.что я не так делаю

Как адаптировать div на мобильных?

Ankhena W: {
box-sizing:border-box;
}
.services {
display: flex;
flex-wrap:wrap;
}

media (min-width: 300px){

.service-item {

width: 100%;
}

.service-item {
position: relative;
width: 31%; /* Ширина первого слоя */
height: 350px;
padding: 10px; /* Поля вокруг текста */
background: #fff; /* Цвет фона */
margin: 15px 15px 15px 15px;
border:1px solid #FF6600;
flex-wrap:wrap

}

так? когда ставлю
.service-item {
position: relative;
width: 100%; /*

на телефоне отлично.но на компе на всю тсарницу они растягиваются

Как адаптировать div на мобильных?

Ankhena W:
сделал так

* {
box-sizing:border-box;
}
.services {
display: flex;
flex-wrap:wrap;
}

media (min-width: 300px){

.service-item {

width: 100%;
}

спасибо Вам огромное)

Как адаптировать div на мобильных?

Ankhena W:

@media (max-width: 300px){
 
  .service-item {
    width: 31%;
  }
   
}
.service-item {
  position: relative;
  width: 100%; /* Ширина первого слоя */
  height: 350px;
  padding: 15px; /* Поля вокруг текста */
  background: #fff; /* Цвет фона */
  margin: 5px auto 55px 15px;
  border:1px solid #FF6600;
}

все возможные варианты попробовал.не получается.что я не так делаю

Как адаптировать div на мобильных?

Ankhena W: медиа это что?услвоие ксс или что первый раз такое вижу

Как адаптировать div на мобильных?

Ankhena W: спасибо)теперь понял)спасибо

Как адаптировать div на мобильных?

Ankhena W: я вставил медиа условия

Как адаптировать div на мобильных?

Ankhena W: https://jsfiddle.net/5aetgw4o/ вот отсюда же взял

Как адаптировать div на мобильных?

* {
box-sizing:border-box;
}
.services {
display: flex;
}
.service-item {
position: relative;
width: 95%; /* Ширина первого слоя */
height: 400px;
padding: 15px; /* Поля вокруг текста */
background: #fff; /* Цвет фона */
margin: 5px auto 15px;
border:1px solid #FF6600;
}

.service-item::before {
content:"\f005";
font-family: 'FontAwesome';
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: orange;
border-radius: 0 0 50% 0;
}

media (max-width: 767px) {
.service-item {
width: 100%;
}
}

вот такой ваш код в ксс.
на мобилке все равно расходится.на компе все отлично

Как вставить в div уголок из шрифта awesome со здведочкой?

Михаил Колпаков: это я понял.просто я не понимаю как сделать чтобы блоки шли ГОРИЗОНТАЛЬНО.с мобилкой помогли спасибо огромное.

Как вставить в div уголок из шрифта awesome со здведочкой?

Михаил Колпаков: да это ок.все ок.я просто не могу понять почему блоки вертикально,а не горизонтально

Как адаптировать div на мобильных?

Ankhena W: удалил)

Как адаптировать div на мобильных?

Ankhena W: спасибо вам)после перерыва жду вас)

Как адаптировать div на мобильных?

Ankhena W: и почему появилась вторая звездочка_)

Как адаптировать div на мобильных?

squirtazzer: Ankhena W: z-mesta.com/reka-nilo а на сайте такая херня

Как адаптировать div на мобильных?

Ankhena W: смотрите ксс

* {
  box-sizing:border-box;
}
.services {
  display: flex;
}
.service-item {
  position: relative;
  width: 95%; /* Ширина первого слоя */
  height: 400px;
  padding: 15px; /* Поля вокруг текста */
  background: #fff; /* Цвет фона */
  margin: 5px auto 15px;
  border:1px solid #FF6600;
}



.service-item::before {
  content:"\f005";
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}



@media (max-width: 767px) {
  .service-item {
    width: 100%;
  }
}

Как адаптировать div на мобильных?

Ankhena W: на мобилке стал полный порядок)спасибо вам.осталось чтобы дивы были горизонтально.

Как вставить в div уголок из шрифта awesome со здведочкой?

Михаил Колпаков: на мобилке полный порядок.надо чтобы на компе были дивы горизонтально одни за другим.