Знающие люди, помогите, пожалуйста. Есть сайт на wordpress. Когда браузер на компьютере развернут полностью, сайт функционирует нормально, но вот стоит уменьшить окно браузера или открыть сайт на планшете - блоки наплывают друг на друга. Я так понимаю, wp-тема просто пытается показать страницу целиком, независимо от размера окна. Как сделать, чтобы сайт просматривался нормально, т. е. в маленьких окнах (на планшетах, телефонах или просто в уменьшенном браузере) появилась возможность прокручиваться страницы вправо-влево, вверх-вниз и чтобы блоки не бегали по страницам с уменьшением масштаба?
Чтобы было так, как вы хотите, надо ставить фиксированную ширину контейнеров. Это делается в стилях либо в коде шаблона. Бывает, что шаблон имеет настройки ширины блоков, там тоже гляньте на всякий случай.
P. S. Современные стандарты верстки предполагают отображение сайта без прокрутки на мобильных устройствах. Считается, что это удобнее. Поэтому желательно сделать чтобы блоки не сжимались, а обтекали друг друга.
Имею ввиду без горизонтальной прокрутки. Точно не могу вам сказать насчет относительной новизны адаптивного дизайна, но скажу с некоторой степенью уверенности, что табличная верстка больше нигде почти не используется, кроме оформления самих таблиц. Да, и еще письма для рассылки делают иногда по старинке таблицами.
Скорее всего, да. Ищите класс блока, затем тестируйте изменения его ширины. Иногда проценты прописаны не в стилях, а в рнр. А лучше и проще - поменяйте тему на подходящую, не резиновую.
Уважаемый gedon! А что делать, если часть информации выходит за пределы страницы (см. на скрине). Я уже пытался увеличивать ширину страницы в стилях, но она все равно почему-тот не увеличивается. Может, что-нибудь посоветуете? Заранее особо благодарен)
Если работаете на локалке, тогда удобнее пользоваться редактором типа notepad++ Открываете файл стилей, находите нужную строчку, исправляете, сохраняете. И проверяете изменения на сайте.
Добрый вечер, уважаемый gedon! Мой сайт уже существует не только на локалке... Может быть, теперь Вы мне что-нибудь посоветуете дельное. Вот уже три дня старательно изучаю CSS и пытаюсь решить следующую проблему: на "страничках исторических личностей" (например, [ссылки видны только авторизованным пользователям]) моего сайта в компьютерном варианте все отображается нормально: аккуратные записи, небольшие миниатюры и т. д. Но вот стоит зайти на сайт с мобильника - и сразу все становится ужасным: фотографии (которые должны быть в виде миниатюр на постах) выглядят огромными, сайт "переключается" в мобильную версию раньше, чем это нужно в px. Пробовал править max-width в @media (менять значения или полностью удалять строки), также пробовал изменять max-width в отдельных контейнерах, но ничего не помогает. Вроде и с CSS пытаюсь дружить, а в голове все равно каша. Может быть вы подскажете или хотя бы натолкнете в правильное русло. Как сохранить компьютерную аккуратность этих самых "постов" на мобильниках и сделать что-то похожее на реальные посты в соц. сетях? Заранее премного благодарен за ответ)
С друзьями получилось, единственная проблема: они почему-то все равно располагаются столбиком. Можно как-то сделать, чтобы были в строчку. А что такое сжатие CSS? Никогда о таком не слышал...
Можно в строчку, фиксировать. Например, задать ширину контейнера 320 пикселей. Однако учитывая, что у вас там отступы большие, нужно меньше делать. А сами картинки - обтекание слева, как сейчас. И по ширине рассчитать, например, поставить им по 100 пикселей, если их три. Если больше, то максимальную ширину - 100 пикселей. Сжатие... может кэширование включено. Адреса файлов стилей с цифрами, поэтому не видно, в какой строчке и что вам писать. Не удобно же работать, наверное со стилями...
Плагинов для кэша, вроде, не использую. Размер контейнеров пробовал выставлять ещё меньше (это все на странице Пушкина), но не помогло: все равно идут друзья столбиком. Может все дело в описании @media? Может, там какие запреты стоят?
У вас там контейнеров много натыкано для каждой фотки. поместите все фото в один контейнер, задайте ему ширину. Затем напишите класс для фото с обтекание слева. И они будут обтекать друг друга, пока не закончится ширина контейнера.
Добрый вечер! Подскажите, пожалуйста, что я делаю не так) Я взял к каждому блоку друзей привязал отдельный класс ".fri" (вся та же страница Пушкина), затем пытаюсь добавить к этому классу описание в style.css (к примеру, меняю рамку: .fri { border: 30px solid red; } Но ничего не происходит и не меняется. Почему так? Заранее благодарен Вам)
И ничего страшного не случится? А почему, даже когда я ставлю для блоков float-left, то при уменьшении окна друзья все равно выстраиваются в вертикальную колонку?)
В стиля - да. Вот, что у меня сейчас: .fri { max-width: 50% ! important; float: left ! important; } "Друзья" уменьшаются только в полноэкранном режиме. Как только уменьшаешь - опять огромные картинки, причем в столбик.
Запутали... Все, ждем Константина :) Я уже не знаю, что посоветовать. Я бы не писала для каждого друга, а прописала бы класс для всего блока друзей, где указала бы, что фоты в этом блоке должны быть по 25% (допустим, если 4) и с обтеканием. Они сами выстраивались бы.
Вы имеете в виду сделать так: В том плагине для верстки, который вы посоветовали, разбить строчку на две части (одна часть под стеной, пустая), вторая - для друзей. А уже во вторую часть вставить 3 картинки с помощью обычного редактора?)
Погодите... я тут попутно еще пытаюсь колодец выкопать и уже перестала соображать и в том и в другом :D Я закончу свои колодцы, а потом попытаюсь как-то объясниться :D
А как вы фотки вставляете? Я - через SiteOrigin Image. Вот так выглядит страница верстки. Там выделены три отдельных виджета SiteOrigin Image с друзьями.
Держите ваш класс на каждого друга. Поправьте по своему разумению (рамка там, размер, что еще...) .fri { width:24%; padding:0.5%; margin:0.5 %; border:1px solid #000; float:left; }
Никакого шаманства :) Бесплатный хостинг берете (Бегет, нпр), бесплатный домен там же выдадут, бесплатный WP автоматом, бесплатную тему адаптивную — и вперед :) Главное понять логику. Пока у меня под руками не оказалось собственной жертвы (я ее благополучно сломала в итоге), я не могла вообще въехать, что сие значит. Но как только нашлось куда деть шаловливые ручки, потихоньку стала понимать, чего куда пихать :D Но это мелочи все... надо учить php. Зависимость от программистов тяжела :(
Арина, прости, что вот так, без приглашения, вклиниваюсь в ваш разговор. Можно мне подробнее про учебник узнать? Что за книжка умная такая? Хочу поставить сайт на нормальный кулинарный шаблон, но руки кривые до ужаса просто, плюс мозги или заплесневели, или извилины потеряли - не могу сообразить ни как страницы сделать, ни меню вверху с выпадающими разделами, про галерею фото вообще молчу - лес, темнее некуда. Рада буду даже обычному названию учебника. Дальше найду сама, надеюсь.
Так это не книжка... кулинарный шаблон — это совсем необязательно. Есть плагины специальные, прекрасно работающие на любом шаблоне. WP гибкий. Плагинов до чертиков: [ссылки видны только авторизованным пользователям] [ссылки видны только авторизованным пользователям] И можно почитать в сети, какие супер-пупер, но боюсь, все друг друга рерайтят и больше 10 не найдешь :D Зачем ограничиваться спец. шаблоном? Мало ли, что в голову потом придет. Сменить тему недолго, а вот подогнать... и не меняют коней на переправе :) Но это имхо, конечно.
Выпадающее меню — это слева в панели: Внешний вид > Меню — и настраиваешь его. Скрин — те, что правее, как раз выпадающие. Добавляешь нужные категории и просто перетаскиваешь их, делаешь элементы дочерними. Ссылка на Главную там же убирается (если надо).
Ага, поняла Арин. Только вот когда я делаю как на скрине - верхнего меню нет, только справа. Но в принципе, тоже получше, чем обычный блог "всё в одной куче". По плагинам ясно - буду изучать и подбирать, учебник такой у меня тоже в закладках стоит, но что-то ума и терпения не хватает разобраться во всем этом. думала есть что-то проще и полегче... :) Будем тренироваться, иначе никак, не бросать же на полпути только из-за внешнего вида сайта.
Спасибо большое за подсказки, пойду кудесничать, надеюсь не сломаю там ничего, править некому.
Та он сейчас страшный, ты меня обсмеешь и я его брошу сразу. Чуть позднее, ок, я после праздников ПЗ тебе сделаю и тогда посмотришь, что я смогла сотворить.
Вот так, сузим поиск: [ссылки видны только авторизованным пользователям] Переходишь на страницу плагина, потом в «Скриншоты» и смотришь, что они там предлагают. [ссылки видны только авторизованным пользователям] Видим — без пошаговых. На тестовый сайт ставим, пытаемся фото разместить в тексте (img src). Если пропускает, нам подходит. Если нет — плохой плагин. Править его мы не станем (не умеем, разработчики это не любят) — в топку :) Ищем дальше.
И ещё вопрос на засыпку - при поверхностном анализе система пишет, что не найдено описание сайта в мета-тегах. Где их надо прописать? У меня стоит плагин All in One SEO Pack, описания есть к каждой странице/рубрике и статье + TDK. Чего не хватает?
Настройки - Общие - Краткое описание сайта. Этот плагин не знаю, им не пользуюсь, не могу сказать, где там прописывают :( Травник вроде его юзает активно.
Там в общих краткое описание есть - сразу заполнила, спасибо блогу Воронина, у него там очень подробно всё расписано. Начну с замены шаблона, потом сделаю тебе ПЗ, подскажешь где косяки. Сама никак...
Я или сойду с ума, или заброшу эту кухню... Сегодня обнаружила, что слетели все счетчики на сайте. Плюс ошибка при анализе (точно помню, что неделю назад такого не было, все было отмечено зеленой галочкой).
Что за напасть такая? Вчера и до этого неделю не заходила на ресурс, много было работы - не до сайта. В понедельник появилась тонна неприятных сюрпризов.
Вряд ли такого не было. Особенно касается нижней строки и верхней. Сторонним ресурсам вообще не расскажешь, каким должно быть время жизни копии (это не могло поменяться, не могло быть зеленым). Время ответа сервера зависит, увы, и от тарифа. Css, js тоже не могли сами вырасти — если они не были min, значит не были. Сжатия то же касается — если не трогала htaccess, то куда ему деваться? Счетчики... тему не меняла?
Тему попробовала поменять - не понравилось. Это могло быть причиной, видимо. Что касается htaccess - я даже не знаю, где это находится. Вообще все, что на английском и мне не понятно - я стараюсь не трогать. Залила статью, фотографии вставила. Хорош. Куда заходила месяц назад - в редактор, что в настройках, вставила код счетчиков, да плагин соцсетей в виджеты.
Буду пока изучать книгу html, похоже без азов не освоить эту область "науки". Надо оставить это дело пока, иначе расстраиваюсь. Отдохну немного, поработаю, после праздников вернусь к сайту. Москва тоже не сразу строилась - а вон какой город красивый вырос.
Это и есть причина. При смене темы слетают счетчики (так и должно быть). Поставь заново и всех делов. Чтобы так не париться, сделай тестовый сайт и пробуй все на нем.
Потом так и сделаю. Сейчас попробую почитать, как решить проблемы кеширования, css, js и вообще, что это такое и с чем едят. А так смысл вопить о помощи, если я даже элементарно не понимаю - откуда, куда и что. Это как завязать глаза и шагнуть на канат, подвешенный в трех метрах над землей. Причем без страховки и опыта. Удачного и приятного тебе понедельника )) Пойду учить матчасть.
Я тебе скажу так: оставь это на потом. Это как раз не самое элементарное. Даже если идти простейшим путем и скачать оптимизированные ресурсы с Гугла, можно сильно напортачить. А сжатый css — ад кромешный. Править его невозможно. Надо делать min, подключать его, а пользоваться норм. Скрипты какие-то сжимают, а какие-то встраивают. Надо знать, куда и как, где async, а где defer. Есть плагин спец., так он работает не везде, увы. И проблему скриптов в верхней части страницы не решает. Я как-то попыталась сама сделать... весь сайт стал простым html. Это не стиль найти, подогнать и юзать...
Мне тут пришлось с хорошим программистом распрощаться, так уже незнамо сколько товарищей (программистов!) говорят, что нельзя сделать то, что он прекрасно делал. А ты хочешь с этого начать :)
Что это такое, знать надо, конечно :) С чем едят — тоже можно, а вот как едят... это не надо пока.
Мне самой не дойдет. Нужно визуально видеть примеры, как делать. Вот курсы - как раз то. Бесплатно же, попробую. Если пойму, что ничего не пойму - буду искать специалиста. Но это не раньше января уже, а там по деньгам буду смотреть. Извини, что оторвала тебя от дел, просто вижу ты в этом намного лучше меня понимаешь, дай, думаю, озадачу вопросиком. )
Добрый вечер. С Вашего позволения, задам ещё один вопрос: как сделать, чтобы классы не выплывали за главный блок? Например, у меня есть блок поста, он имеет отдельный класс. Внутри этого блока ещё два: класс с фото и класс с текстом. Как только текста становится больше, он выползает за главный блок. Для главного блока поста в стилях прописал фиксированную высоту, по-другому никак не получалось. Пробовал ставить высоту auto - тоже не вышло. Может, Вы знаете, как в стилях прописать, чтобы если класс внутри бока расширялся, то и блок увеличивался?
Там один блок всего (для него и прописан фон и фиксированная высота), а внутри - все div по разным классам с обтеканием. .str -главный блок, dat - дата, nap - "Пушкина написал", pos - это сам пост.
Убирайте фиксированную высоту. Вообще не мучьте блоки высотами и широтами. Там все до нас чудненько сделано. Ставьте размеры элементам.
для текста этого достаточно .pos { width: 98%; margin: 2%; background: #fff; /*фон меняйте на ваш цвет*/ padding: 1%; /* отступ текста от рамки */ border: 1px solid #666; /*меняйте ширину рамки как хотите*/ border-radius: 2px; /*меняйте угол как хотите*/ text-align: center; }
Что-то теперь текст идет в строчку (можете там же посмотреть), не помещается в блок + обтекает, а мне нужно, чтобы он снизу был, поэтому я задавал margin-top: 20%.
Хотя всё! Я кое-что подправил, убрал рамку на посте, сейчас только шрифтом выделю - и хорошо. Так даже красивее) Вы замечали у меня на сайте, что, пока слайдеры не загрузились, изображения выстраиваются в ряд (на долю секунды)? Это можно как-то исправить, а то как-то некрасиво. P. S. Для вставки слайдеров использую шорткоды)
Мне больше нравится в рамке. Не знаю, в чем проблема у вас... обернули в div, и всех делов. Насчет исправить — нет, не знаю. Скрипты, может, в куче болтаются... это я пас. Не шарю.
Нет, я имею ввиду... <div class... Вы закройте div тех трех элементов и откройте новый — на текст. 3 элемента в одном, текст — в другом. У меня ничего никуда не едет. Картинки сверху, текст в рамочке — снизу. Все как доктор прописал. Я вообще не понимаю, как может текст так залезть, когда ему 100% задано. Вы что-то не закрыли.
Вот код: <p style="text-align: center;"><span class="dat"><strong>1815</stro ng></span></p> <p style="text-align: left;"><a href="[ссылки видны только авторизованным пользователям]"><img class="ava" src="[ссылки видны только авторизованным пользователям]" alt="" /> </a></p> <p style="text-align: center;"><span class="nap"><strong><a href="[ссылки видны только авторизованным пользователям]">Александр Пушкин</a> написал:</strong></span></p> <p style="text-align: left;"><span class="pos">Убирайте фиксированную высоту. Вообще не мучьте блоки высотами и широтами. Там все до нас чудненько сделано. Ставьте размеры элементам.</span></p>
<div class="pos">Убирайте фиксированную высоту. Вообще не мучьте блоки высотами и широтами. Там все до нас чудненько сделано. Ставьте размеры элементам.</div>
Да где вы ставите? Такого быть не может, чтобы один отдельный блок все перекосил. В редакторе ставьте руками. Задайте конкретный класс конкретному объекту.
Вот так <div style="width:100%"><p style="text-align: center;"><span class="dat"><strong>1815</stro ng></span></p> <p style="text-align: left;"><a href="[ссылки видны только авторизованным пользователям]"><img class="ava" src="[ссылки видны только авторизованным пользователям]" alt="" /> </a></p> <p style="text-align: center;"><span class="nap"><strong><a href="[ссылки видны только авторизованным пользователям]">Александр Пушкин</a> написал:</strong></span></p></ div> <div class="pos">Убирайте фиксированную высоту. Вообще не мучьте блоки высотами и широтами. Там все до нас чудненько сделано. Ставьте размеры элементам.</div>
Кое-что добавила. Это я затупила... у меня были только картинки, а у вас-то текст справа. Только я его добавила, сразу все и поехало :D Сейчас мне сильно некогда, потому писать будете самостоятельно (у меня все вообще строкой). Добавьте overflow: auto. И высоту auto.
Теперь получилось, но я все же рамки убрал: в соц. сетях же нету рамок) Я, наверное, Вас уже достал, но осмелюсь задать еще вопрос (надеюсь, он будет последним). Как сделать, чтобы margin для основного блока (страницы) был минимальным? Он вообще, скорее всего, задан у меня в пикселях, а не в процентах, т. к. в мобильной версии отступы вообще огромные (см. скрин). Пробовал править body, классы самих виджетов - ничего не выходит. Может, это не в основных стилях вообще проблема, а так где-то? Заранее спасибо)
Добрый день! Пришел еще раз сказать Вам спасибо. Сегодня научился таким же образом переделывать и посты, чтобы в мобильной версии они смотрелись аккуратно и не выстраивались в столбик. Кстати, !important больше не использую: все и так работает. Теперь буду потихоньку переделывать дизайн, менять все элементы. Вот я и подумал: может, вы заметили какие-то недочеты в дизайне? Может, что-то сделать больше, что-то меньше, убрать или, наоборот, добавить? Или вообще, может, тему сменить? Как думаете?)
В мобильной версии элементы не должны быть слишком маленькими, иначе пользователь не сможет их рассмотреть. Пользуйтесь: [ссылки видны только авторизованным пользователям] Сервис удобен: показывает, какие конкретно элементы слишком мелкие. !important и не нужен внутри блока. Тогда вы пытались настроить работу блоков, но это все правят в файлах плагина, и без опыта лучше вообще не делать. Там в настройках рамка уже была, потому понадобился !important. По дизайну советов не дам: совсем не шарю.
А если у одного, кто проверяет с мобильного, блоки не расползаются и не налазят друг на друга, все хорошо. А у другого, кто например, работает со стационарного компа, блоки налазят друг на друга, что делать в такой ситуации?
Публикация комментариев и создание новых тем на форуме Адвего для текущего аккаунта ограничено. Подробная информация и связь с администрацией: https://advego.com/v2/support/ban/forum/1186
