Как задать правильно размер для сайта?
но в мобильно версии показывает до раздела доставки. и невозможно на право сделать до контактов.
И еще сверху контакты съезжает на логотип. как исправить?
Сам сайт http://new-naturel.ru в хроме увеличить на 150% увидите проблему
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как правильно задать размер фона?
Здравствуйте. На сайте http://pariki-ellen.ru/ решил установить <meta name="viewport".
Как задать размер для множество фотографий?
Здравствуйте, хочу задать один размер для множество выводимых средствами пхп фотографий? Что я.
HTML как задать размер для каждой страницы отдельно
Нужна помощь, как в коде Html задать для каждой страницы отдельный размер. Вот на пример у меня на.
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Сообщение от art22 
Почему именно 1100? У вас сайт фиксированный, не мобильно ориентирован, задайте ширину минимальную, равную ширине контента — min-width: 1180px;
Регистрация: 08.05.2015
Сообщений: 104
я задавал и большие размеры ни в какое. оказывается все хранился в кеше. отчистил кеш все стало на свое место. Спасибо. тема закрыта
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Сообщение от art22
я задавал и большие размеры ни в какое. оказывается все хранился в кеше. отчистил кеш все стало на свое место. Спасибо. тема закрыта
Посмотрел на ваш сайт, из-за болшего размера 1350 который вы задали, появился скрол на мобильных девайсах.
Регистрация: 08.05.2015
Сообщений: 104
Когда 1180px указываю контакты передвигаются на логотип, по этому большой задал, не могу понять почему контакты в вверху двигается при изменении размера
и еще в разделе доставки почему то внизу пустота в мобильной версии, я указывал высоту auto
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Сообщение от art22
не могу понять почему контакты в вверху двигается при изменении размера
Потому что блок некорректно спозиционирован, и не участвует в потоке, он выходит за область контента, потому и тормозит.
Регистрация: 08.05.2015
Сообщений: 104
А с высотой в разделе доставки ничего нельзя сделать? Соседний пункт нормально отображается. высота у них вроде одинаковая, там просто текст. хотя в разделе статьи тоже самое. (
107 / 101 / 35
Регистрация: 14.03.2014
Сообщений: 586
обычно задается не min-width а max-width(сайт лучше чтобы был адаптивный) в этом случае, и лучше не для body, а обернуть все в div например с классом .wrapper
3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Сообщение от Evgeniy55
обычно задается не min-width а max-width
Это не так, не вводите людей в заблуждение. тыц
107 / 101 / 35
Регистрация: 14.03.2014
Сообщений: 586
Сообщение от mrtoxas
Это не так, не вводите людей в заблуждение. тыц
виноват, не верно выразился , вы его сайт откройте, там нет точек для адаптивности, там просто указан min-width для body и может еще где то, попросту чтобы сайт оставался в одном размере что приведет к горизонтальному скролу на меньших устройствах, видать для того чтобы ниче не сьезжало, а поскольку сайт уже для десктопа сделан, то тут уже как и по Вашей ссылке через max-width расставить точки и сделать его адаптивным, сам сайт не большой и не сложный чтобы это сделать, ну по крайней мере как по мне, то так лучше было бы, чем на мобиле/планшете постоянно пальцами во все стороны елозить
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Как правильно настроить размер таблицы(для всех броузеров)?
На скриншоте отметил высоту, ширину определённых краев: экран броузера, таблица, столбцы таблицы. .
Как в CSS задать отдельное изображение для каждого из 3 состояний кнопки меню моего сайта?
Я сделал 3 изображения для кнопки меню своего сайта — по одному изображению для каждого состояния.
Можно ли задать размер картинки для закрытия модального окна?
Для закрытия модального окна используется вот такой типовой код: a.modalCloseImg < .
Задать максимальную ширину html страницы
Страница на телефоне открывается красиво, а на компе — развёрнута на всю ширину и верхнее меню видно. 
Когда уменьшаю окно браузера до размеров телефона — вот так красиво, так и надо сделать при развёрнутом окне, чтоб всё посерединке и максимум 500рх шириной. Я замучался с этим max-width, не знаю уже куда его впихнуть, помогите. Страница вся в одном файле, без отдельных стилей и скриптов. Вот так хочу при развёрнутом окне чтоб было. 
Вот весь код страницы.
html < font-family: Helvetica, Arial, sans-serif; font-size: 16px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased >body < margin: 0; padding: 0 >.base-panel < margin: 0 22px 0 22px >.base-panel>*>label < display: inline-block; width: 3.0em; text-align: right >.base-panel>*>label.slist < width: auto; font-size: 0.9em; margin-left: 10px; text-align: left >input < -moz-appearance: none; -webkit-appearance: none; font-size: 0.9em; margin: 8px 0 auto >.lap < visibility: collapse >.lap:target < visibility: visible >.lap:target .overlap < opacity: 0.7; transition: 0.3s >.lap:target .modal_button < opacity: 1; transition: 0.3s >.overlap < top: 0; left: 0; width: 100%; height: 100%; position: fixed; opacity: 0; background: #000; z-index: 1000 >.modal_button < border-radius: 13px; background: #660033; color: #ffffcc; padding: 20px 30px; text-align: center; text-decoration: none; letter-spacing: 1px; font-weight: bold; display: inline-block; top: 40%; left: 40%; width: 20%; position: fixed; opacity: 0; z-index: 1001 >table < border-collapse: collapse; border-spacing: 0; border: 1px solid #ddd; color: #444; background-color: #fff; margin-bottom: 20px >table.info, table.info>tfoot, table.info>thead < width: 100%; border-color: #5C9DED >table.info>thead < background-color: #5C9DED >table.info>thead>tr>th < color: #fff >td, th < padding: 10px 22px >thead < background-color: #f3f3f3; border-bottom: 1px solid #ddd >thead>tr>th < font-weight: 400; text-align: left >tfoot < border-top: 1px solid #ddd >tbody, tbody>tr:nth-child(odd) < background-color: #fff >tbody>tr>td, tfoot>tr>td < font-weight: 300; font-size: .88em >tbody>tr:nth-child(even) < background-color: #f7f7f7 >table.info tbody>tr:nth-child(even) < background-color: #EFF5FD >.luxbar-fixed < width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) >.luxbar-burger span, .luxbar-burger span::before, .luxbar-burger span::after < display: block; height: 2px; width: 26px; transition: 0.6s ease >.luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span < background-color: transparent >.luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::before, .luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::after < margin-top: 0 >.luxbar-header < display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 58px >.luxbar-menu-right .luxbar-burger < margin-left: auto >.luxbar-brand < font-size: 1.6em; padding: 18px 24px 18px 24px >.luxbar-menu < min-height: 58px; transition: 0.6s ease; width: 100% >.luxbar-navigation < display: flex; flex-direction: column; list-style: none; padding-left: 0; margin: 0 >.luxbar-menu a, .luxbar-item a < text-decoration: none; color: inherit; cursor: pointer >.luxbar-item < height: 58px >.luxbar-item a < padding: 18px 24px 18px 24px; display: block >.luxbar-burger < padding: 18px 24px 18px 24px; position: relative; cursor: pointer >.luxbar-burger span::before, .luxbar-burger span::after < content: ''; position: absolute >.luxbar-burger span::before < margin-top: -8px >.luxbar-burger span::after < margin-top: 8px >.luxbar-checkbox < display: none >.luxbar-checkbox:not(:checked)~.luxbar-menu < overflow: hidden; height: 58px >.luxbar-checkbox:checked~.luxbar-menu < transition: height 0.6s ease; height: 100vh; overflow: auto >.dropdown < position: relative; height: auto; min-height: 58px >.dropdown:hover>ul < position: relative; display: block; min-width: 100% >.dropdown>a::after < position: absolute; content: ''; right: 10px; top: 25px; border-width: 5px 5px 0; border-color: transparent; border-style: solid >.dropdown>ul < display: block; overflow-x: hidden; list-style: none; padding: 0 >.dropdown>ul .luxbar-item < min-width: 100%; height: 29px; padding: 5px 10px 5px 40px >.dropdown>ul .luxbar-item a < min-height: 29px; line-height: 29px; padding: 0 >@media screen and (min-width:768px) < .luxbar-navigation < flex-flow: row; justify-content: flex-end; >.luxbar-burger < display: none; >.luxbar-checkbox:not(:checked)~.luxbar-menu < overflow: visible; >.luxbar-checkbox:checked~.luxbar-menu < height: 58px; >.luxbar-menu .luxbar-item < border-top: 0; >.luxbar-menu-right .luxbar-header < margin-right: auto; >.dropdown < height: 58px; >.dropdown:hover>ul < position: absolute; left: 0; top: 58px; padding: 0; >.dropdown>ul < display: none; >.dropdown>ul .luxbar-item < padding: 5px 10px; >.dropdown>ul .luxbar-item a < white-space: nowrap; >> .luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::before < transform: rotate(225deg) >.luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::after < transform: rotate(-225deg) >.luxbar-menu-material, .luxbar-menu-material .dropdown ul < background-color: #263238; color: #fff >.luxbar-menu-material .active, .luxbar-menu-material .luxbar-item:hover < background-color: #37474f >.luxbar-menu-material .luxbar-burger span, .luxbar-menu-material .luxbar-burger span::before, .luxbar-menu-material .luxbar-burger span::after
Как изменить ширину сайта?
Доброго.
Подскажите как указать максимальную ширину сайта. Изначально он был во весь экран (как тостер например), было принято решение применить блочный формат, но подскажите как уменьшить максимальную ширину сайта.
Если это важно: Bootstrap, двиг WP
Заранее спасибо!
- Вопрос задан более трёх лет назад
- 5189 просмотров
2 комментария
Простой 2 комментария
Rustam Bainazarov @SmthTo Куратор тега CSS
Это помимо того, что вопрос косой.
Ankhena @Ankhena Куратор тега CSS
В бутстрапе есть 2 класса .container-fluid для 100% ширины и .container для фиксированной. Вероятно, вам нужно поменять container-fluid н container.
А может и нет. Мы же не знаем, что у вас в коде, может там все стили бутстрапа перебиты.
Чего не стоит делать, так это менять ширину тега body.
Решения вопроса 0
Ответы на вопрос 2
Ну.
Ты можешь body присвоить максимальную ширину
body
85% — собственно понятно что это
Ответ написан более трёх лет назад
Нравится 1 3 комментария
Руслан Макаров @facepook Автор вопроса
я не силен в html, но понимаю, что на мобилах тоже это будет работать и на узком экране (например айфон 5s минус 15% это будет не камильфо((
tuxfighter @tuxfighter
Руслан Макаров, Вы слышали что нибудь про адаптивную верстку, медиазапросы?
Руслан Макаров, вы можете для разрешения iPhone 5s прописать хоть 1%, вбейте в поиске адаптивную верстку и как она делается, тогда поймете.
Раз человек задаёт подобный вопрос, значит ему бесполезно говорить «задайте max-width», он скорее всего просто не знает что это такое и где его задают.
Поэтому давайте так:
1. Откройте страницу вашего сайта.
2. Правой клавишей мыши откройте контекстное меню и выберите «Просмотр кода страницы» (это в Chrome в других браузерах может быть чуть по другому, но главное, чтоб были слова код и страница).
3. В отдельной вкладке откроется код вашей страницы, найдите в нём конструкцию (тег) /head. Делается это так: нажимаете комбинацию клавиш Ctrl+F и в правом верхнем углу появляется окно поиска. Вводите в него нужную конструкцию, в нашем случае /head, и этот тег сразу подсвечивается на странице с кодом.
4. Находите конструкцию (тег), который идёт сразу после тега /head. Это может быть wrapper, body, или что-то другое. В современных темах встречаются разные названия, видимо в целях безопасности или ещё чего. зависит от бзика разработчика, главное чтоб после тега /head
5. Идёте в админку вашего сайта и выбираете в меню слева «Внешний вид», а в нём «Редактор тем». Переходите.
6. Вам сразу откроется файл style.css. Именно он вам нужен.
7. Открываете Поиск (Ctrl+F) и вбиваете тот элемент, который вы нашли на странице с кодом после /head
8. Нюанс: в редакторе WordPress подсветятся только те элементы, которые находятся в видимой части экрана и если в вашей теме в начале файла style.css много комментариев, то поиск нужного элемента не увидит. Придётся найти его чисто визуально, что не будет особо сложно, так как такие элементы находятся обычно вверху файла. На сервере это было-бы делать проще, но учитывая вашу подготовку, я вас туда не посылаю.
9. Нужный вам элемент скорее всего будет в нескольких селекторах, в том числе и в групповых, где нескольким элементам заданы одни и те-же свойства, поэтому я рекомендую прописать в файле отдельный селектор, в любом месте после закрывающей скобки> такого вида
body (или другое название) max-width: 80%; (число на ваше усмотрение, можно задать в пикселях)
>
Сохраняем файл, смотрим что получилось и подгоняем нужную ширину.
Ширина (width) и высота (height) в HTML
В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):
Получится такой результат:
Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это:
Получится такой результат:
К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.
Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)
Максимальная и минимальная ширина (max-width и min-width)
Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.
Результат будет аналогичен предыдущему примеру:
Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:
По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.
Максимальная и минимальная высота (max-height и min-height)
Для блока div можно задать максимальную высоту. Это делается в том случае, если контента в блоке будет слишком много и есть вероятность, что он испортит вёрстку сайта. Ведь у контейнера div высота изменяется автоматически в зависимости от того, сколько занимает места его дочерние элементы.
Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха. Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.
По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.