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

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

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

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

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

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

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

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

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

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

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

Почему неправильно отображаются шрифты во всех браузерах?

1. Это на конкретном сайте или на всех?
1.1. сайт ваш или чужой?
2. В одном браузере или во всех?
3. OS?

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

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

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

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

squirtazzer:

скажите мне

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/

Какие проблемы при продвижении сайта?

Слышал что якобы поисковики такие сайты день плохо продвигают.

Да лучше бы хелп Яндекса чтоль прочитали
https://yandex.ru/support/webmaster/robot-workings...

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

squirtazzer:
В примере исправлены и теги тоже. Теги <p> не вкладываюся снова в <p> и парные теги хорошо бы закрывать.

И у вашего вопроса тег wordpress не имеет никакого отношения к сути. Логичнее были бы CSS и HTML.

Почему экспорт svg фотошоп не отображается на сайте?

mrusklon:

фотошоп открою вам секрет , давно экспортирует в svg

ну да, а теперь посмотрите на свой типа SVG
вот скрин:

Как вы верстаете и проверяйте под retina экраны?

У хрома в адаптивном режиме есть выбор dpi

Какой css код более правильный?

Второй, только названия классов не стоит завязывать на цвет, размер и т.д. Лучше на "зачем он" или "что это".
Т.е. класс .attention лучше, чем .red

Как сделать табы?

alex_lahin: Выбирайте какой больше понравится, разбирайтесь как он сделан и адаптируйте под себя. С конкретными вопросами приходите.

Какой порядок обучения веб-верстке вы посоветуете?

сейчас прохожу курс на htmlacademy

до конца пройдете, половина вопросов пропадет