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

Question

[squirtazzer]

https://hkar.ru/QrMW на компе все ок.
на мобильных ужас.https://hkar.ru/QrN4
добавлял width Auto но тогда все верстка слетает. подскажите как быть

Answer 1

[Alexander Pushkarev]

Добавить width: 100%? Код скиньте

Comments

[squirtazzer]

#layer3 {
width: 30%; /* Ширина первого слоя */
max-width: 300px
height: 400px;
padding: 15px; /* Поля вокруг текста */
background: #fff; /* Цвет фона */
float: left;
float: left;
margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
border:1px solid #FF6600;
}

Answer 2

[eagle-eyed-hikka]

Попробуй добавить min-width: 300px к div.

Answer 3

[Ankhena]

На мобильных у вас должно быть по одному блоку на строчку. Значит ширина каждого по 100% (считая, что используется box-sizing: border-box).

Выкладывайте проблемный код в песочницу https://jsfiddle.net/ или давайте ссылку на сайт. По скринам гадать, что у вас в коде не очень удобно.

Comments

[squirtazzer]

z-mesta.com

#layer1 {
    width: 31%; /* Ширина первого слоя */
   height: 400px;
    padding: 15px; /* Поля вокруг текста */
    background: #fff; /* Цвет фона */
float: left;
margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
border:1px solid #FF6600;
   }
#layer2 {
    width: 31%; /* Ширина первого слоя */
    
height: 400px;
    padding: 15px; /* Поля вокруг текста */
    background: #fff; /* Цвет фона */
float: left;
margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
border:1px solid #FF6600;
   }
#layer3 {
        width: 31%; /* Ширина первого слоя */
width: 100%        
height: 400px;
    padding: 15px; /* Поля вокруг текста */
    background: #fff; /* Цвет фона */
float: left;
float: left;
margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
border:1px solid #FF6600;
}





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

#layer1 {
  position: relative;
  background: #fff;
  width: 100%
}
#layer2 {
  position: relative;
  background: #fff;
  width: 100%
}
#layer3 {
  position: relative;
  background: #fff;
  width: 100%
  
}


<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 28pt; color: #ff6600;">ТУРИСТИЧЕСКИЕ ПАКЕТЫ БАЗЫ "НИЛО"</span></p>

<div id="layer1">
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"ЭКОНОМ"</span></p>


<hr />
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 20pt; color: #00ccff;">5000 РУБ/СУТКИ</span></p>

<ul>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">ПРОЖИВАНИЕ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">БАНЯ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">РЫБАЛКА</span></li>
 	<li style="text-align: left;">...</li>
</ul>

<hr />

</div>
<div id="layer2">
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"СТАНДАРТ"</span></p>


<hr />
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 20pt; color: #00ccff;">6000 РУБ/СУТКИ</span></p>

<ul>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">ПРОЖИВАНИЕ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">УСЛУГИ ПОВАРА (ГОТОВИМ ИЗ НАШИХ ПРОДУКТОВ)</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">БАНЯ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">РЫБАЛКА</span></li>
</ul>

<hr />

</div>
<div id="layer3">
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"СТАНДАРТ+"</span></p>


<hr />
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 20pt; color: #00ccff;">8000 РУБ/СУТКИ</span></p>


 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">ПРОЖИВАНИЕ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">3-х РАЗОВОЕ ПИТАНИЕ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">БАНЯ</span></li>
 	<li style="text-align: left;"><span style="font-family: OpenSans, monospace; font-size: 10pt;">РЫБАЛКА</span></li>
</ul>

<hr />

[Ankhena]

squirtazzer: о боже мой...

0. Пожалуйста, пройдите https://htmlacademy.ru/courses
1. Разделяйте html и css, никаких style="..." в html-коде быть не должно. Пишите классы и описывайте стили в CSS.
2. Не используйте id для стилизации, пишите классы, их можно использовать многократно.
3.

float: left;
float: left;
margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;

зачем 2 раза float? Зачем 4 раза margin? Достаточно по одному, браузер принимает последнюю запись.

3.1 перестаньте использовать float, там где он не нужен, используйте flexbox

теперь конкретно для решения задачи

4. Для div'ов с id layer1, layer2, layer3 добавьте класс class="service-item"
для которого в CSS задайте ширину, например, 95% а правый и левый margin автоматический, чтобы блок оказался по центру.
Вот пример https://jsfiddle.net/5aetgw4o/
5. Дальше, чтобы на больших экранах ширина была 31%, а на маленьких 95% используйте media условия.
https://jsfiddle.net/6zjpmt8k/ изменяйте ширину блока, где показан результат.
Чтобы блоки вставали ровно при большом размере окна я им сделала общую обертку и задала ей display:flex читайте: https://html5book.ru/css3-flexbox/

[Ankhena]

squirtazzer: и странно отмечать один ответ, а использовать другой. Мне немножко обидно.

[squirtazzer]

Ankhena W: простите я запутался просто)_

[squirtazzer]

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

[Ankhena]

squirtazzer: логично, ведь код я взяла из того, что Вы выложили выше, а там блока со звездочкой нету.

Смотрите: https://jsfiddle.net/jb255aka/
вот в этом примере вообще не надо ничего вставлять в html
нужно только дописать для блочиков в CSS:

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

[squirtazzer]

Ankhena W: супер. НО https://hkar.ru/QrS2

спасибо вам большое я начинаю понимать как это работает)
z-mesta.com/reka-nilo
Ankhena W: https://hkar.ru/QrSg на ммобилке поплыло все опять(

[squirtazzer]

Ankhena W: https://hkar.ru/QrSg на ммобилке поплыло все опять(

[Ankhena]

squirtazzer:
мы же договорились без float'ов?

[squirtazzer]

Ankhena W: z-mesta.com/reka-nilo без флоат в высоту блоки)

[Ankhena]

squirtazzer:
ой, а у вас же там бутстрап подключен.

Так посмотрите на ютубе полно уроков про бутстрап и адаптивные сайты.
Или читайте, например, отсюда и дальше mybootstrap.ru/scaffolding/#gridSystem

Я в целом против бутстрапа, но раз он все равно уже есть, то глупо велосипеды делать.

[squirtazzer]

Ankhena W: господи.скажите мне просто как сделать три блока горизонтально, и чтобы на мобилке они шли друг за другом. хоть с бустрапом хоть без.просто как бы вы сделали.я уже запутался голова дымиться а заказчик точит ножи

[Ankhena]

squirtazzer:
Если оставлять float, то надо использовать clearfix www.xiper.net/collect/html-and-css-tricks/css-tric...

Но по-хорошему, переверстать бы по человечески.

И еще раз прошу, хотите заниматься версткой, пройдите уроки из пункта 0 из комментария выше.

[Ankhena]

squirtazzer:

скажите мне

я добавила обертку для этих 3х блоков (см п.5.)

[squirtazzer]

Ankhena W: где тут плачущюий смайлик
?)ладно спасибо( удалю все вставлю как картинку

[Ankhena]

squirtazzer: не надо, это слишком жестокая угроза :)

Просто аккуратно посмотрите примеры, которые я делала и комментарии к ним, Вы разберетесь.

[squirtazzer]

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

[Ankhena]

squirtazzer: чтобы горизонтально - им нужна обертка

5. Дальше, чтобы на больших экранах ширина была 31%, а на маленьких 95% используйте media условия.
https://jsfiddle.net/6zjpmt8k/ изменяйте ширину блока, где показан результат.
Чтобы блоки вставали ровно при большом размере окна я им сделала общую обертку и задала ей display:flex читайте: https://html5book.ru/css3-flexbox/

[squirtazzer]

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

[squirtazzer]

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

[Ankhena]

squirtazzer: смотрю CSS, вижу
что блоку .service-item задана ширина 95%, а при ширине меньшей 767 точек ширина должна быть 100%.

Мне казалось, что было 31% на больших и 95% на маленьких.

Похоже, пора сделать перерыв :)

[squirtazzer]

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

[squirtazzer]

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

[Ankhena]

squirtazzer: потому что одна прописана через ::before, а вторую вы не удалили из HTML

[squirtazzer]

Ankhena W: удалил)

[Ankhena]

squirtazzer: А еще в браузере есть инструменты разработчика (обычно открываются по Ctrl+Shift+I или F12), там если нажать кнопочку со стрелкой (обычно крайняя левая), то ею можно выделить любой элемент в коде и увидеть кто он, какие на него влияют стили и т.д. (как у меня на скрине выше)

[squirtazzer]

* {
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%;
}
}

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

[Ankhena]

squirtazzer: не правда, мой код не такой. Сравните внимательно.

[squirtazzer]

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

[Ankhena]

squirtazzer: ррррыыы
тут https://jsfiddle.net/5aetgw4o/ media правил нет вообще!

[squirtazzer]

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

[Ankhena]

squirtazzer: угу, но не туда

Основные стили перебили эти самый условия. (Смотрите в инспекторе кода)
500px в условиях это, кстати, от балды взято, поставьте столько сколько нужно на вашем сайте.
Использовать min-width или max-width это тоже ваш выбор.
Мне больше нравится max и иду сверху вниз.
У бутстрапа другой (обратный) подход, mobile-first.

[squirtazzer]

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

[squirtazzer]

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

[Ankhena]

squirtazzer: https://webref.ru/css/media

[Ankhena]

squirtazzer: а также гугл по запросу "media queries"

[squirtazzer]

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

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

[Ankhena]

squirtazzer:
https://jsfiddle.net/e22jt2zr/ изменяйте размер окошка с результатом.

Теперь, например, при сжатом окошке открываем инспектор стилей и смотри "а почему же фон именно голубой?"

И там, в инспекторе написаны ВСЕ свойства, которые влияют на нужный элемент и видно кто и почему какие свойства перебивает. Справа даже написано в каком файле и в какой строчке эти правила написаны. (У меня прямо в индексе, ну просто потому что это jsfiddle, у вас будет указан какой css).

На вкладке styles будет эта же информация в другом виде. Там видно какие media участвуют и какие свойства зачеркнуты.

[Ankhena]

squirtazzer:
На мобильных для .services надо поставить flex-wrap:wrap

[squirtazzer]

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

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

media (min-width: 300px){

.service-item {

width: 100%;
}

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

[Ankhena]

squirtazzer: НЕТ

На мобильных для .services надо поставить flex-wrap:wrap

[squirtazzer]

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%; /*

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

[squirtazzer]

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

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

[Ankhena]

squirtazzer:
Вы все стили запихали в мобильные.
Но ведь рамки и все остальная красота должна действовать всегда.
На мобилках изменяется только ширина блочика и wrap у родителя.
Простая же логика.

[squirtazzer]

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

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

[Ankhena]

Если вы пишете mobile-first, то сначала идут общие свойства без media те, которые для мобильных устройств. Потом в порядке увеличения min-width с соответствующими свойствами.

Если наоборот, сначала десктопы, то значит сначала идут общие свойства которые отвечают за все и красиво выглядят на десктопах. А потом max-width в порядке убывания.

У вас в коде каша.
Определитесь в каком порядке вы работаете - в том и напишите.

Чтобы было красиво на десктопах уберите margin у .service-item, а для .services добавьте justify-content: space-between https://html5book.ru/css3-flexbox/#justify-content

Криво сейчас еще потому что:
Доступное место 100%.
У вас 3 блока по 31%.
Остается 7%.
Все прекрасно, но у вас почему-то margin написан в пикселях. Где-то 90 точек (15px*6 ) впишутся в оставшиеся 7%, где-то нет.
Тут нет никакой запредельщины, это математика какого-то там класса.

Пожалуйста, читайте теорию.
Иначе вам путь не на тостер, а на фриланс.

[Ankhena]

squirtazzer: Сначала идут свойства без media, а потом с ними. Иначе свойства без media перебьют те, которые с условиями.
Ну вы хоть раз-то в консоль бы загляглянули. Я уже и примеры действия показала и на скринах.

Не нравятся мои примеры, посмотрите как устроен бутстрап, разберитесь, что в нем написано.

Так https://jsfiddle.net/on0rr31m/ при mobile first
Так: https://jsfiddle.net/3nqrLn6r/ если сначала десктопы

[squirtazzer]

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

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

[Ankhena]

squirtazzer: Я у вас на сайте вижу, что вы справились.

[squirtazzer]

Ankhena W: спасибо

Answer 4

[squirtazzer]

* {
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%;
}
}