Как правильно добавить элементы, чтобы на моб. версии отображались нормально?

Question

[Антон Вертов]

Доброго времени суток. Есть сайт html5, css3. Скачал бесплатный шаблон. Добавил туда свои элементы (кнопки, формы). Всё вроде бы хорошо, но в компьютерной версии всё отображается нормально, а в мобильной именно те элементы, которые я добавил отображаются неверно. Подскажите пожалуйста, как правильно центровать (делать отступы и т.д) элементы, чтобы они нормально смотрелись на всех разрешениях и мобильной версии ?

заранее огромное спасибо.

Answer 1

[Максим]

https://webref.ru

Answer 2

[Гарес Антонович]

Так вы можете задать определенный файл для разрешения

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

"max-width" значит что условие вступает в силу на экранах меньше 800 пикселей включительно.
вы можете задать media="(min-width: 800px)" это будет значить что от 800 и больше включительно

.facet_sidebar {
    display: inline-block;
  }
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

Тут указано что блок .facet_sidebarбудет отображаться на всех девайсах линейно блочно, но на устройствах меньше 600px то этот блок будет скрыт.

Для выравнивания по центру применяйте условия
Для блочных элементов

margin-left: auto;
margin-right: auto;

Для строчных элементов
С учетом того что этот параметр задается блоку в котором находиться строчный элемент
text-align:center;
Для вертикального выравнивания строчных элементов используйте параметр line-height: 40px;
С учетом того что размер шрифта 20 пикселей