Правила форума Новые сообщения/темы Список пользователей Поиск RSS
  • Страница 1 из 1
  • 1
Форум » О uCoz'е » Помощь новичкам » Адаптация дизайна под мобильник
Адаптация дизайна под мобильник
trem200Дата: Понедельник, 11.05.2020, 19:51 | Сообщение # 1
Проверенный
Сообщений: 71
Награды: 1
Репутация: 10
В общем возникла проблема при адаптации дизайна под мобильное устройство, а именно указав нужный стиль "@media only screen and (max-width: 940px) { }", и попробовав написать, что элементы должны стоять чётко по середине, ни чего не получилось. Попробовал прописать в стили "Float: Center;" нужные элементы по середине не встали. Что надо прописывать в данном случае?

Код CSS

Код
/*Material_info_load*/
.material {text-align: center;}
.material-info {display: inline-block;width: 100%;background-color: #0a151b; padding: 10px;}
.material-block {color: #fff;font-size: 14px;text-align:left;display: block;float: left;margin: 5px;width: 48%;}
.material-block a{color: #fff;}
.material-block a:hover{color: #b33d3d;}
.material-info p {color: #fff; font-size: 12pt;}
.material-info span {padding: 10px; background:#b33d3d;}
.user_file {float: right;}
.uf_ava {width:150px;}
.uf_info a {color: #fff;}
.uf_info a:hover {color: #b33d3d;}
.uf_info span {background:none;}
@media only screen and (max-width: 940px) { }
/*END*/


Ссылка на сайт: Кликни [Ссылка не кликабельная, так как ответ получен].

Дорогой администратор, после решение проблемы, и моего подтверждения, решения её, то удалите прямую ссылку на мой сайт. Всё это пишу я из-за его не готовности, к открытому публикации его на публику.


Сообщение отредактировал trem200 - Понедельник, 11.05.2020, 22:59
 
YaViДата: Понедельник, 11.05.2020, 21:39 | Сообщение # 2
Основатель
Сообщений: 220
Награды: 8
Репутация: 74
Цитата trem200 ()
В общем возникла проблема при адаптации дизайна под мобильное устройство, а именно указав нужный стиль "@media only screen and (max-width: 940px) { }", и попробовав написать, что элементы должны стоять чётко по середине, ни чего не получилось. Попробовал прописать в стили "Float: Center;" нужные элементы по середине не встали. Что надо прописывать в данном случае?


Попробуй данный код

Код
/*Material_info_load*/
.material {text-align: center;}
.material-info {display: inline-block;width: 100%;background-color: #0a151b; padding: 10px;}
.material-block {color: #fff;font-size: 14px;text-align:left;display: block;float: left;margin: 5px;width: 48%;}
.material-block a{color: #fff;}
.material-block a:hover{color: #b33d3d;}
.material-info p {color: #fff; font-size: 12pt;}
.material-info span {padding: 10px; background:#b33d3d;}
.user_file {float: right;}
.uf_ava {width:150px;}
.uf_info a {color: #fff;}
.uf_info a:hover {color: #b33d3d;}
.uf_info span {background:none;}
@media only screen and (max-width: 940px) {
.material-block {
    color: #fff;
    font-size: 14px;
    display: block;
    float: none;
    margin: 0 auto;
    width: 100%;
    padding: 5px;
    text-align: center;
}
.user_file {
    margin: 0 auto;
    text-align: center;
    display: inline-grid;
    float: none;
}
}
/*END*/


Все мы надеемся на красивый конец, этой некрасивой жизни.
 
trem200Дата: Понедельник, 11.05.2020, 22:57 | Сообщение # 3
Проверенный
Сообщений: 71
Награды: 1
Репутация: 10
YaVi, Спасибо огромное, всё заработало нормально, в прямом смысле слова спас. Можно закрывать тему данного вопроса.

Сообщение отредактировал trem200 - Понедельник, 11.05.2020, 22:59
 
YaViДата: Вторник, 12.05.2020, 08:36 | Сообщение # 4
Основатель
Сообщений: 220
Награды: 8
Репутация: 74
Тема закрыта!


Все мы надеемся на красивый конец, этой некрасивой жизни.
 
Форум » О uCoz'е » Помощь новичкам » Адаптация дизайна под мобильник
  • Страница 1 из 1
  • 1
Поиск: