#html #css #web #mobile #blogger
#HTML #css #веб #Мобильный #blogger
Вопрос:
Я создал сайт с платформой Blogger. У меня в блоге 4 страницы, все в списке страниц отлично смотрится на ПК (это мой блог: https://www.onlinebouwdroger.be/p/home.html ). Я хочу, чтобы моя мобильная версия была такой же, как настольная версия (поэтому нет пользовательского мобильного шаблона).
Вот проблема, с которой я сталкиваюсь (см. Скриншоты ниже):
- Панель страниц показывает только первые две страницы на мобильных устройствах, а затем помещает другие в «Подробнее …»
- При нажатии на «Подробнее …» все заголовки страниц перепутаны.
Я бы предпочел, чтобы все 4 страницы отображались в списке страниц на мобильном устройстве, как и на рабочем столе. Я понимаю, что мобильный экран недостаточно широк, чтобы поместить 4 заголовка в одну строку (как на рабочем столе), но есть ли способ поместить последние 2 заголовка страницы ниже первых 2 (чтобы заголовки отображались 2×2)?
Или, если это невозможно, выпадающее меню должно, по крайней мере, выглядеть и работать прилично. Как я уже упоминал, я хочу показывать тему рабочего стола на мобильных устройствах, а не мобильную тему.
просмотр с мобильных устройств без нажатия кнопки «еще»
просмотр с мобильных устройств после нажатия на «подробнее»
Как мне решить эту проблему, чтобы полный список страниц отображался и на мобильных устройствах? (Без необходимости переключаться на мобильный шаблон?) Или как мне заставить выпадающее меню выглядеть / функционировать должным образом?
Я искал везде в Интернете, но, похоже, не могу найти правильного ответа.
Заранее спасибо!
Джульетта
Комментарии:
1. Хороший вопрос! В будущем, пожалуйста, разместите соответствующий код в вашем вопросе. Кроме того, пожалуйста, подумайте о том, чтобы сделать это и для этого. Это повышает вероятность того, что на него ответят.
2. Привет, спасибо! Я совсем новичок в html, поэтому не уверен, какую часть моего кода я должен опубликовать..
Ответ №1:
Вы можете настроить таргетинг на меньшие экраны в своем css следующим образом:
@media screen and (max-width: 400px) {
myNavbar { css in here }
}
Оттуда вы можете изменить способ отображения ссылок.
Комментарии:
1. Спасибо! Я действительно успешно использовал это раньше для отображения другого фонового изображения на мобильном устройстве. Но я очень новичок в html и не знаю, что вставить между скобками, чтобы изменить способ отображения ссылок.. Кроме того, куда мне поместить этот мой html-код? Как я уже сказал, я очень новичок в этом деле и знаю только основы.. Спасибо!
2. Это будет частью CSS и остальной части вашей разметки стиля. (тег стиля) Кроме того, учитывая, что у вас примерно 2 тыс. строк CSS, я бы предложил перенести это в отдельный файл. Более чистый код, и его можно кэшировать, чтобы лучше загружать все ваши страницы. Я не уверен, какой инструмент вы используете для создания этой страницы, но большая часть html не нужна (как и в большинстве конструкторов страниц) и усложняет решение. Но я пытаюсь разобраться в этом, чтобы увидеть, что вы можете добавить, чтобы исправить вашу проблему, а не просто сказать вам начать все сначала с bootstrap и сделать это за 5 минут.
3. Спасибо Phaelax! Я использую Blogger для этого сайта (не могу изменить платформу, так как она предназначена для клиента), и я в основном занимался аспектом дизайна. Кажется, я не могу найти какое-либо решение своей проблемы в Интернете, поэтому держите меня в курсе, если что-то найдете. Это было бы потрясающе!
4. Привет, Фелакс, извините, что снова беспокою вас, но я в некотором роде в отчаянии! Я ничего не могу найти об этом в Интернете.. У вас есть какие-либо идеи о том, как я мог бы это исправить? Большое вам спасибо!
5. Я посмотрел на это дальше и, честно говоря, код blogger — это такой беспорядок, 99% которого не нужны. Удалите классы из навигации (pagelist, overflowable и т. Д.) И Просто создайте свой собственный css панели навигации. Это будет намного проще, чем пытаться переопределить весь мусор, который делается.
Ответ №2:
Вы должны добавить CSS для вкладки внутри медиа-запроса, чтобы скрыть / показать вкладки в зависимости от размера экрана
/* Очень маленькие устройства (телефоны, 420 пикселей и ниже) */
@media only screen and (max-width: 420px) {...}
/ * Небольшие устройства (планшеты с портретным изображением и большие телефоны, 600 пикселей и выше) *
@media only screen and (min-width: 420px) and (max-width: 768px) {...}
/ * Устройства среднего размера (альбомные планшеты, 769 пикселей и выше) */
@media only screen and (min-width: 769px) {...}
/ * Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) */
@media only screen and (min-width: 992px) {...}
/* Устройства очень большого размера (большие ноутбуки и настольные компьютеры, разрешение 1200px и выше) */
@media only screen and (min-width: 1200px) {...}
Комментарии:
1. Привет, спасибо! Я использовал это раньше для отображения другого фонового изображения на мобильном устройстве. Но то, что я ищу, — это css, который мне нужно поместить между скобками {…}. Я очень новичок в html, поэтому не уверен, что мне нужно туда поместить… Кроме того, где именно я должен поместить это в свой HTML-код? Я помещаю опцию фонового изображения позади «<style> body {«, я тоже помещаю это туда?
2. Привет, Чинмэй, извини, что снова беспокою тебя, но я в некотором отчаянии! Я ничего не могу найти об этом в Интернете.. У вас есть какие-нибудь идеи о том, что я должен поместить в скобки {…}, чтобы исправить это? Большое вам спасибо!
3. У вас должно быть css-правило для конкретного устройства, на которое вы хотите настроить таргетинг w3schools.com/css/css_rwd_mediaqueries.asp