0 Пользователей и 1 Гость просматривают эту тему.
  • 16 Ответов
  • 407 Просмотров
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Резиновый шаблон
« : 16.12.2017, 02:10:10 »
Резинка по ширине 100%
А надо сделать чтобы по вертикали 100% окна, а по ширине уже масштабируется, чет не могу сообразить как прописать и вообще можно ли корректно
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #1 : 17.12.2017, 20:03:19 »
Если вы открываете браузер на четверть монитора, отображение сайта перестраивается, картинки съезжают. Как сделать если вы открыли сайт даже на 15% монитора и он отмасштабировался соответственно
в пропорции 3:4
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #2 : 17.12.2017, 20:33:47 »
Да, тег прописан
Код
<meta name="viewport" content="width=device-width, initial-scale=1">
*

effrit

  • Легенда
  • 8867
  • 978 / 9
  • effrit.com
Re: Резиновый шаблон
« Ответ #3 : 17.12.2017, 20:41:12 »
не гуманно адаптивность заменять масштабированием. под микроскопом сайт не принято разглядывать сегодня.
можно для избранных блоков оставить нужную процентную ширину, скажем, в 33%, прописав это в custom.css в блоке @media
погугли, как это работает.
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #4 : 17.12.2017, 21:06:16 »
не гуманно адаптивность заменять масштабированием. под микроскопом сайт не принято разглядывать сегодня.
можно для избранных блоков оставить нужную процентную ширину, скажем, в 33%, прописав это в custom.css в блоке @media
погугли, как это работает.

это я погуглила . Это получается для каждого блока в отдельности, как сделать для всего целиком не поняла. Адаптивная, но уже на четверти экрана все слетает, хотя это далеко не мелко. Миинимальная ширина вообще не указана, ограничения нет. Изображения не могу заставить масштабироваться. Хотя бы % на 30

*

effrit

  • Легенда
  • 8867
  • 978 / 9
  • effrit.com
Re: Резиновый шаблон
« Ответ #5 : 17.12.2017, 21:14:50 »
адаптивная - это значит что сайт перестраивается, а не "слетает"  ;D
потому, что включаются правила, которые срабатывают при изменении ширины окна.
вот их и надо переопределить.

смысл в том, что у сеточной верстки и блоки унифицированны.
так что если задать для одного класса правило, оно сразу целое подмножество покроет.

и никуда от этого не деться: либо соглашаешься, что шаблон ведет себя согласно типовой сетке, либо переопределяешь поведение для части блоков.
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #6 : 17.12.2017, 21:44:50 »
Да это я понимаю, но рано он перестраивается, я и хотела задать ширину окна минимального после которого он станет перестраиваться, а до этого размера будет масштабироваться Для мобильного понятно. А вот на рабочем столе вы уменьшаете окно, а он даже при достаточно нормальном визуальном отображении начинает перестраивать. Как задать тот рубеж, до которого перестраиваться не должен. А должен сохраняться в изначальном виде так сказать.

К примеру четверть экрана (19) а он уже перестраивает. Вот не могу найти где эти правила прописаны, сам файл
*

effrit

  • Легенда
  • 8867
  • 978 / 9
  • effrit.com
Re: Резиновый шаблон
« Ответ #7 : 17.12.2017, 21:52:19 »
все плохо  ;D
надо много-много читать про CSS и @media
ещё раз: начинают перестраиваться именно потому, что им прописали это правило.
засекаем, при каком размере происходит перестраивание блоков и пишем свое правило media для этого разрешения, которое ОТМЕНИТ изменение ширины нужных нам блоков.
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #8 : 17.12.2017, 22:01:44 »
К примеру, вот прописала, компонент переопределила, не работает...
 @media (min-width:600px) {.sppb-row-container{width:100%}}
@media (min-width:400px) {.sppb-row-container{width:100%}}
@media (min-width:350px) {.sppb-row-container{width:100%}}
*

effrit

  • Легенда
  • 8867
  • 978 / 9
  • effrit.com
Re: Резиновый шаблон
« Ответ #9 : 17.12.2017, 22:08:41 »
это слишком рандомно  ;D
вот что ты хотела этим переопределить?
типа, "мне не нравится, что блок занимает 100 ширины, так что сделаю-ка я правило, чтобы он... занимал 100% ширины!"
*

effrit

  • Легенда
  • 8867
  • 978 / 9
  • effrit.com
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #11 : 17.12.2017, 22:13:57 »
@media screen and (min-width:350px) {.sppb-row-container{width:100%}}  если окно 350 ширина останется 100% или как заставить  сохранить все пропорции.
*

effrit

  • Легенда
  • 8867
  • 978 / 9
  • effrit.com
Re: Резиновый шаблон
« Ответ #12 : 17.12.2017, 22:15:12 »
в общем, смысл в том, что блоки на широком формате имеют, скажем, 33% ширины.
а при сужении получают 100 и занимают всю строку.
так что тебе надо им обратно возвращать эти самые 33%.
 
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #14 : 17.12.2017, 22:17:08 »
не те.....но я по идее думала что правило действует и для того что внутри ... а мне наоборот надо, уменьшить, ну да..
*

kern.USR

  • Давно я тут
  • 805
  • 61 / 1
Re: Резиновый шаблон
« Ответ #15 : 18.12.2017, 10:55:11 »
судя по классам - у вас SP PageBuilder используется.
Зачем лезть в стили, если всё настраивается в админке. PageBuilder прекрасно умеет генерировать стили для разных экранов.
И, дополнительно, хотелось бы узнать, в какой файл вносите изменения?
*

tati-2000

  • Захожу иногда
  • 308
  • 2 / 0
Re: Резиновый шаблон
« Ответ #16 : 26.12.2017, 17:50:47 »
Да я через админку и прописываю класс в  custom.css , просто то как перестраивает под экраны сейчас, не устраивает человека...
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как перенести сайт на новый шаблон?

Автор lexus26

Ответов: 8
Просмотров: 267
Последний ответ 24.09.2018, 07:53:28
от draff
Шаблон RocketTheme

Автор lexus26

Ответов: 4
Просмотров: 188
Последний ответ 23.09.2018, 09:10:39
от passer
Правильно скопировать шаблон одной страницы для VM

Автор Виталя

Ответов: 0
Просмотров: 120
Последний ответ 30.08.2018, 11:19:02
от Виталя
Шаблон

Автор aslero

Ответов: 10
Просмотров: 278
Последний ответ 25.06.2018, 12:30:46
от NewUsers
Шаблон Xeon

Автор svetlovanton

Ответов: 5
Просмотров: 309
Последний ответ 18.06.2018, 20:09:04
от svetlovanton