Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Изменять ширину шаблона от разрешения экрана

Тема в разделе "Общее для WordPress", создана пользователем Kimono, 9 июл 2016.

  1. Kimono

    Kimono

    Сообщения:
    42
    Симпатии:
    0
    Баллы:
    6
    Как изменить ширину шаблона сайта в зависимости от разрешения сайта? Добиться нужного результата смог когда поставил в style в параметр max-width поставил 75% вместо 1080 px. На разных мониторах сайт стал отображаться как мне нужно, а до этого он на одном мониторе не помещался, а на другом был слишком узкий! Но вот пришла беда! На телефоне вместо полной ширины как было появился правый отступ! Или когда сужаешь окно браузера меньше 795px, пропадает левый отступ от тела сайта! Помогите пожалуйста исправить
    Мой сайт vape-volt.ru
    Cкриншоты:
    Вот здесь беда
    https://yadi.sk/i/0idW4RWTt9a42
    Вот здесь всё нормально
    https://yadi.sk/i/MpfCU76kt9ZxX
    Вот с телефона моя беда
    https://yadi.sk/i/kdlKEywCt9a7K
     
  2. -Vladislav-

    -Vladislav- Местный

    Сообщения:
    212
    Симпатии:
    50
    Баллы:
    28
    Ваше решение
    Код:
    body.responsive.layout-boxed #page-wrapper {
        margin: 0 auto;
    }
     
    • Симпатия Симпатия x 1
  3. Kimono

    Kimono

    Сообщения:
    42
    Симпатии:
    0
    Баллы:
    6
    Спасибо большое за ответ!
    Простите за ещё один глупый вопрос, это нужно в моём коде найти и изменить или добавить куда-то в код? Я вставил вроде в код это, на ПК в браузерах решило проблему, но на телефоне теперь отступ появился с двух сторон, а хочется чтобы на телефонах было в полную ширину.
    Скриншот:
    https://yadi.sk/i/EDRx5MaQt9duk
     
    Последнее редактирование: 9 июл 2016
  4. -Vladislav-

    -Vladislav- Местный

    Сообщения:
    212
    Симпатии:
    50
    Баллы:
    28
    Код выше для центровки блока, дальше надо со стилями работать под определенные разрешения. Сейчас уже на диване с планшета пишу, - не могу посмотреть. Завтра гляну.
     
  5. Kimono

    Kimono

    Сообщения:
    42
    Симпатии:
    0
    Баллы:
    6
    Буду очень благодарен за помощь!)
     
  6. -Vladislav-

    -Vladislav- Местный

    Сообщения:
    212
    Симпатии:
    50
    Баллы:
    28
    В style.css у вас есть секция
    @media (max-width: 1080px) {
    //сюда впишите
    }
    Код:
    body.responsive #page-wrapper {
        max-width: 100%;
    }
     
    • Симпатия Симпатия x 1
  7. Kimono

    Kimono

    Сообщения:
    42
    Симпатии:
    0
    Баллы:
    6
    Я пробовал вставить в два места этот код и не помогло, на телефоне так же всё и осталось(

    Скриншоты куда и как вставлял:

    Первое место с такой секцией
    https://yadi.sk/i/S5Y9AieNtADrx

    Второе место с такой секцией
    https://yadi.sk/i/qgpp6IcVtADoM

    Может было нужно обратно поменять ширину шаблона на 1080px. а то я менял там на 75% , может из-за этого конфликт? Или везде где 1080 px. стоит изменить на 75%

    Я убрал ваш код и попробовал изменить обратно размер шаблона с значения 75% на 1080px, так как без кода на телефоне отображался сайт во всю ширину, но на ПК отступы по краям мне жутко не нравятся своими размерами на разных мониторах.
    На скриншотах то что получилось:

    Вот строка в которой я менял ширину ранее с 1080px, на 75%, сейчас я обратно выставил 1080px
    https://yadi.sk/i/XN0tHjjftAF8r

    Огромные отступы по краям на мониторе 1600х900
    https://yadi.sk/i/PQhXbk6StAEhg

    Маленькие отступы но терпимые на мониторе 1360х768, страшно представить что на мониторе 1024x768. плагин корзины наверное залезет на сайт
    https://yadi.sk/i/vJ9WcGIXtAEup

    Но на телефоне стало отображаться так, как я хочу
    https://yadi.sk/i/EZEq8A6HtAF57

    Сейчас сайт получается настроен на 1080px как и было изначально всё в шаблоне, но как мне побороть эти отступы? Хочу чтобы они были меньше и на разных мониторах подстраивались самостоятельно
     
    Последнее редактирование: 10 июл 2016
  8. -Vladislav-

    -Vladislav- Местный

    Сообщения:
    212
    Симпатии:
    50
    Баллы:
    28
    Странно что задвоен медиазапрос, ..возможно разработчику так было удобнее.
    Медиа запросы не так сложны, попробуйте разобраться.
    Допустим вы вернули сайт обратно к 1080px и вас не устраивает что на больших экранах поля с боку.
    Определяете новый медиа запрос, например для мониторов 1600px:
    Код:
    @media (max-width: 1600px) {
    //сюда пишите какую ширину хотите для поля сайта
    }
    например:
    Код:
    @media (max-width: 1600px) {
    body.responsive #page-wrapper {
        max-width: 100%;
    }
    }
    Теперь при ширине 1600px сайт будет занимать 100% экрана
    (важно - есть принцип наследования - от больших "разрешений экрана" правила передаются для меньших, пока не будут переопределены новым правилом (стилем цсс)

    ..лучше использовать дочернюю тему для правок
     
    • Согласен Согласен x 1