ФорумКреативWeb Design
Демиарт Поиск Новые сообщения
ОтветитьНовая темаНовое голосование
ОтветитьНовая темаНовое голосование
3 ответа. 326 просмотров.
   
 мужчина  Tappam Wah 9 Февраля 2020, 16:18
Пост №1 * 9 Февраля 2020, 16:18
Ответ с цитированием этого сообщения

Размышляющие
461 пост
360°
Возраст: 36
Регистрация: 9.09.2013
Проживает: Удин
Всем привет!
У меня такой нубский вопрос. Я недавно начал создавать свою свою страницу в Wordpress, конкретно в плагине Elementor. Все вроде бы ничего и потихоньку что то получается, но на смартфоне всё сдвинуть до не приличности :shok:
Я конечно понимаю, что надо подкручивать, но не настолько же? У вас есть опыт в работе с Элементором? Может я где то накосячил, если посмотреть в ютуб - как это делают другие, то ни у кого такого бардака нет..

Мобильная версия сайта

Мобильная версия сайта

Www.2dgym.de/english


Отредактировано: Tappam Wah — 9 Февраля 2020, 16:18
  Google

Группа: Робот
1 пост
Возраст: скрывает
Регистрация: 26.11.2003

 мужчина  Tappam Wah 9 Февраля 2020, 19:24 (спустя 3 часа 6 мин.)
Пост №2 * 9 Февраля 2020, 19:24 (спустя 3 часа 6 мин.)
Ответ с цитированием этого сообщения

Размышляющие
461 пост
360°
Возраст: 36
Регистрация: 9.09.2013
Проживает: Удин
Хорошая новость - я нашёл в чём дело...
Плохая - дело в коде самого генератора и тут я безпомощен((

Можете мне помочь? Где кроется ошибка, которая рушит мне мобильную версию?

html
CODE
<h1>CHARACTER GENERATOR</h1>
<div class="char_en_container">
<p id="char_en"></p>
</div>
<div style="box-sizing:border-box;display:flex;justify-content:center;align-items:center">
 <button id="button" style="" onclick="char_en()" >GENERATE<i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>


css
CODE
h1 {
 font-size: 20px;
 text-align: center;
 font-family: 'Fira Sans Condensed', sans-serif;
 margin-bottom: 5px;
color: #D6D6D6;
}

.char_en_container {
margin-top: 10px;
 background-color: rgba(255, 255, 255, 0.73);
 color: #4D4D4D;
border-radius: 0%;
 position: relative;
 padding-top: 1px;
 box-sizing: border-box;
}

.char_en_container p {
margin-right: 20px;
 padding: 1px;
border-radius: 10%;
 line-height: 1.6;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;

}

button {
 height: 60px;
 justify-content: right;
 outline: none;
 font-famiy: sans-serif;
 position: relative;
 padding: 5px;
 width: 120px;
 left: 0vh;
 border: none;
 background-color: #444444;
 border: none;
border-radius: 30%;
 color: #D6D6D6;
 transition: 500ms ease-in;
 font-size: 20px;
 display: flex;
 justify-content: center;
}

button i {
 margin-left: 3px;
}

button:hover {
 color: #fff;
 background-color: #333333;
}

.char_en:first-child {
 height: 30vh !important;
}

@media screen and (max-width: 565px) {
  body {
   text-align: right;
 }
.char_en p {
   font-size: 14px;
 }
 div:first-child {
   height: 2vh;
 }
}

@media screen and (min-width: 565px) {
 body {
   text-align: center;
 }

}

0
 мужчина  superyurec 10 Февраля 2020, 19:25 (спустя 1 день 39 сек.)
Пост №3 * 10 Февраля 2020, 19:25 (спустя 1 день 39 сек.)
Ответ с цитированием этого сообщения

Размышляющие
762 поста
77°
Возраст: 34
Регистрация: 14.05.2010
Проживает: Москва
Вам нужно прописать все элементы и изменить/подогнать их размеры под @media screen and (max-width: 565px)

Примерно так:

CODE


@media screen and (min-width: 565px) {

h1 {
font-size: 10px;
}

.char_en_container {
margin-top: 5px;

}

.char_en_container p {
margin-right: 10px;
}

button {
height: 30px;
padding: 5px;
width: 60px;
border-radius: 15%;
font-size: 10px;

}

.char_en:first-child {
height: 15vh !important;
}
}
0
 мужчина  Tappam Wah 16 Февраля 2020, 14:05 (спустя 5 дней)
Пост №4 * 16 Февраля 2020, 14:05 (спустя 5 дней)
Ответ с цитированием этого сообщения

Размышляющие
461 пост
360°
Возраст: 36
Регистрация: 9.09.2013
Проживает: Удин
superyurec, спасибо, дело было дещствительно в @media screen и хватило того, что я его полностью убрал из кода :rolleyes:
0
« Предыдущая тема | Web Design | Следующая тема »
 Похожие темы
Мобильная версия сайта
Agnessa 27 1557 +1 17 Октября 2011 - 17:55
» к последнему сообщению
PDA версия сайта
The Palm-Tree 2 900 11 Марта 2011 - 19:33
» к последнему сообщению
Сайт по продаже мобильных телефонов.
Kind-Wizzard 23 2555 1 Апреля 2007 - 20:40
» к последнему сообщению
SHOPMAN - мобильный сайт
Требуется критика, советы, оценка, мнени
CyberLife 49 2427 4 Июня 2008 - 11:28
» к последнему сообщению
Сайт мобильного контента
нужна ваша критика
ultra-marin 4 1001 5 Февраля 2009 - 09:17
» к последнему сообщению

1 посетитель в этой теме
, 1 гость