Растянуть новый bootstarp

[IVAN.Z 2]

Как растянуть стандартный vamshop4 ?

 

 

https://photos.google.com/photo/AF1QipPDAi48GOCPxg_j1BWPCvs95KqhxjjByuHT2Tup

[support 447]

  В 05.12.2019 в 16:46, ZM сказал:

Как растянуть стандартный vamshop4 ?

 

 

https://photos.google.com/photo/AF1QipPDAi48GOCPxg_j1BWPCvs95KqhxjjByuHT2Tup

Expand  

css стилями.

По умолчанию container шириной 1140px

Добавьте свой стиль для container

Например width: 100%;

[IVAN.Z 2]

Для мобильной версии измнений не надо? можно только .container на 100% выставить, колонки товаров растянуться? 

[support 447]

В /templates/vamshop4/css/vamshop4.css меняйте:

.container {
  padding-left: 0;
  padding-right: 0;
}

на что-то типа:

.container {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  min-width: 100%;
}

 

  В 05.12.2019 в 17:00, ZM сказал:

Для мобильной версии измнений не надо? можно только .container на 100% выставить, колонки товаров растянуться? 

Expand  

В мобильной версии и так контейнер bootstrap на 100%

[IVAN.Z 2]

Спасибо потестирую

[IVAN.Z 2]

Не вся шапка растянулась, а где остатки шапки стилей лежат? https://ibb.co/CQMXrhZ

.mainwrapper 

    padding-left: 15px;
    padding-right: 15px; 

тоже лучше удалить для вписывания слайдера

changelog так сказать

[support 447]

  В 05.12.2019 в 17:45, ZM сказал:

Не вся шапка растянулась, а где остатки шапки стилей лежат? https://ibb.co/CQMXrhZ

.mainwrapper 

    padding-left: 15px;
    padding-right: 15px; 

тоже лучше удалить для вписывания слайдера

changelog так сказать

Expand  

У Вас есть доступ к любым css стилям и Вы можете делать всё, что угодно.

Я Вам лишь показал пример.

А дальше уже делать Вам так как нужно.

[Роман_DD 2]

  В 05.12.2019 в 17:45, ZM сказал:

Не вся шапка растянулась, а где остатки шапки стилей лежат? https://ibb.co/CQMXrhZ

.mainwrapper 

    padding-left: 15px;
    padding-right: 15px; 

тоже лучше удалить для вписывания слайдера

changelog так сказать

Expand  

Надо править стили в @media для широких экранов, тоже собираюсь сделать vamshop4 очень зажато смотрится на большом fullhd или на 4k. Уберу серый фон и поставлю макс ширину где-то 1400px

Я рекомендую визуальный редактор Stylizer где можно наглядно все увидеть сразу как что получается и легко находить нужные элементы в css, а также новые генерить. 

 

[support 447]

  В 06.12.2019 в 04:57, Роман_DD сказал:

Надо править стили в @media для широких экранов, тоже собираюсь сделать vamshop4 очень зажато смотрится на большом fullhd или на 4k. Уберу серый фон и поставлю макс ширину где-то 1400px

Я рекомендую визуальный редактор Stylizer где можно наглядно все увидеть сразу как что получается и легко находить нужные элементы в css, а также новые генерить. 

 

Expand  

Согласен, тоже смотрю всякие beru.ru ozon.ru wb.ru , у них чуть шире и смотрится по-веселее вроде бы.

Я наверное сделаю по умолчанию шире в следующей версии, как wb.ru

У них 1360 в ширину.

Но 100% тоже делать нельзя, иначе на всяких 4k 8k тоже будет смотреть плохо.

[Роман_DD 2]

Я 1340 сделал, вроде ничего не уехало, цены прыгающие в правый верхний угол убрал, но думаю надо padding сделать и чтобы они с лейблами не пересекались.

 

@media (min-width: 1200px) {
  .container {
    max-width: 1340px;
  }
}

 

webslidemenu.css

vamshop.css

vamshop4.css

.card.card-product .img-wrap img {
    padding-top: 18px; 
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

  В 06.12.2019 в 06:37, support сказал:

Согласен, тоже смотрю всякие beru.ru ozon.ru wb.ru , у них чуть шире и смотрится по-веселее вроде бы.

Я наверное сделаю по умолчанию шире в следующей версии, как wb.ru

У них 1360 в ширину.

Но 100% тоже делать нельзя, иначе на всяких 4k 8k тоже будет смотреть плохо.

Expand  

сейчас все либо с большими экранами, либо с мобильника, но вообще конечно надо адаптировать верстку под все разрешения и браузеры, допустим верстка того же беру, смотрится нормально даже на древних браузерах, а вамшоп немного разъезжается...

[support 447]

  В 06.12.2019 в 06:54, Роман_DD сказал:

Я 1340 сделал, вроде ничего не уехало, цены прыгающие в правый верхний угол убрал, но думаю надо padding сделать и чтобы они с лейблами не пересекались.

 

@media (min-width: 1200px) {
  .container {
    max-width: 1340px;
  }
}

 

webslidemenu.cssFetching info...

vamshop.cssFetching info...

vamshop4.cssFetching info...

.card.card-product .img-wrap img {
    padding-top: 18px; 
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

сейчас все либо с большими экранами, либо с мобильника, но вообще конечно надо адаптировать верстку под все разрешения и браузеры, допустим верстка того же беру, смотрится нормально даже на древних браузерах, а вамшоп немного разъезжается...

Expand  

А что именно разъезжается?!

beru наоборот не смотртся нормально.

Появляется прокрутка если сжать окно браузера.

У них для смартфонов приложение, а сайт они не используют для мобильных пользователей.

Тоже самое и у wb

[Роман_DD 2]

  В 06.12.2019 в 07:06, support сказал:

А что именно разъезжается?!

beru наоборот не смотртся нормально.

Появляется прокрутка если сжать окно браузера.

У них для смартфонов приложение, а сайт они не используют для мобильных пользователей.

Тоже самое и у wb

Expand  

в старом хроме разъезжается, у меня stylizer старый и там как раз старый хром и моззила, но вообще конечно старый хром скорее исключение. Больше шансов на старый ie нарваться или оперу.

[support 447]

В старом хроме я тоже проверяю, в очень старом хроме высота плиток с товаром разъезжается, т.е. высота не варивнивается, а так, смотрится нормально.

Но в старом хроме не поддерживаются новые правила html, css, так что с этим сложно что-то сделать, разве что JS код добавлять, как сделано в vamshop1 шаблон, т.е. высота выравнивается по самому высокому элементу.

В старом ie тоже самое, выглядит всё нормально, за исключением высоты плиток с товаром.

  В 06.12.2019 в 07:08, Роман_DD сказал:

в старом хроме разъезжается, у меня stylizer старый и там как раз старый хром и моззила, но вообще конечно старый хром скорее исключение. Больше шансов на старый ie нарваться или оперу.

Expand  

 

[Роман_DD 2]

  В 06.12.2019 в 07:10, support сказал:

В старом хроме я тоже проверяю, в очень старом хроме высота плиток с товаром разъезжается, т.е. высота не варивнивается, а так, смотрится нормально.

Но в старом хроме не поддерживаются новые правила html, css, так что с этим сложно что-то сделать, разве что JS код добавлять, как сделано в vamshop1 шаблон, т.е. высота выравнивается по самому высокому элементу.

В старом ie тоже самое, выглядит всё нормально, за исключением высоты плиток с товаром.

 

Expand  

Да, я про плитки и говорил. Так может задать жестко высоту ? 380px должно хватить с лихвой... 

[support 447]

  В 06.12.2019 в 07:21, Роман_DD сказал:

Да, я про плитки и говорил. Так может задать жестко высоту ? 380px должно хватить с лихвой... 

Expand  

Я стараюсь делать максимально универсальные решения по умолчанию.

Если я сделаю 380 px для любых устройств, любых разрешений, завтра будет куча вопросов, почему так сплюснуто, почему так растянуто, почему так много свободного места в плтике или наоборот, почему так мало свободного места в плитке, у кого-то ведь картинки например с портретной ориентацией, т.е. высокие и узкие, у кого-то наоборот - альбомная ориентация, узкая и длинная и т.д. и т.п., всё это влияет на внешний вид.

В конкретном магазине конечно надо делать так как Вам нужно, а вот по умолчанию в движке надо какие-то универсальные варианты икать, подходящие для всех.

Совсем уж старых версий хрома и ie по статистики уже не так уж и много, особенно хрома, который сам считай обновляется.

В общем, всё постоянно в процессе улучшения, постоянно вносятся правки, от версии к версии.

Так что будет всё улучшаться постепенно, я нигде и никогда не утверждаю, что всё прям идеально и больше нечего улучшать, добавлять.

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

Так что в любом случае, спасибо за советы.

[support 447]

  В 05.12.2019 в 17:00, ZM сказал:

Для мобильной версии измнений не надо? можно только .container на 100% выставить, колонки товаров растянуться? 

Expand  

Сделал по умолчанию в шаблоне vamshop4 ширину 1360, как на wb.ru

Вроде бы так лучше выглядит.

Вот исправленные файлы, попробуйте их у себя.

/templates/vamshop4/css/vamshop4.css

/templates/vamshop4/webslidemenu/webslidemenu.css

vamshop4.css

webslidemenu.css

[IVAN.Z 2]

Спасибо огромное ) 

ахахха жаль доступа нет 

[support 447]

  В 06.12.2019 в 09:34, ZM сказал:

Спасибо огромное ) 

ахахха жаль доступа нет 

Expand  

Даже лучше вот так.

Чуть поправил.

 

webslidemenu.css

vamshop4.css

[support 447]

Поставил новые стили на демку http://demo.vamshop.ru

Вроде бы так по-лучше выглядит.

[Роман_DD 2]

Давайте может раз Вы за стили взялись, заодно мобильную верстку поправим? Я там на почту накидал примеров с актуальной версии.

Едет верстка в корзине и на подтверждении заказа. Думаю надо просто по другому решить, без отступов и больших кнопок количества сбоку, все же мало кто в корзине количество меняет уже, особенно на мобиле. либо картинку по центру делать, а весь текст под ней размещать блоками.

Потому что я смотрю все пытаются версии для слабовидящих делать на мобиле, а основной покупатель интернет магазина, у него все же смартфон от 5 дюймов сейчас, и там за счет плотности пикселей все хорошо смотрится даже  если меньше делать.

 

  В 06.12.2019 в 10:23, support сказал:

Поставил новые стили на демку http://demo.vamshop.ru

Вроде бы так по-лучше выглядит.

Expand  

однозначно лучше и современней!

Еще бы поиск растянуть немного... и мегаменюху чуть по другому решить, колонками, и было бы идеально, я там кидал на почту возможные решения на бутстрапе в колонках... 

 

[support 447]

  В 06.12.2019 в 11:11, Роман_DD сказал:

Еще бы поиск растянуть немного... и мегаменюху чуть по другому решить, колонками, и было бы идеально, я там кидал на почту возможные решения на бутстрапе в колонках... 

 

Expand  

Поиск растянуть то не проблема, но я специально оставляю запас, что б было место добавить ещё ссылок в полоску.

В /templates/vamshop4/webslidemenu/webslidemenu.css поменяйте стиль li.wssearchbar

width: 20% поменяйте на width: 30%

Встречается 2 раза в файле, менять только 1 стиль, если второй поменять, тогда на небольшом экрана не влезут в 1 стркоу все ссылки, в том числе админка.

Хотя наверное можно и по умолчаию чуть увеличить, с 30% тоже место остаётся

В меню колонками выводятся подкатегории 2 уровня и 3 и 4.

А первый уровень колонками вряд ли получится сделать, тогда не будет места для 2, 3 уровней.

Хотя надо подумать, можно как-то определять, есть подкатегории или нет, если только 1 уровень, то вообще не показывать блок для второго уровня.

 

[support 447]

  В 06.12.2019 в 11:11, Роман_DD сказал:

Едет верстка в корзине и на подтверждении заказа. Думаю надо просто по другому решить, без отступов и больших кнопок количества сбоку, все же мало кто в корзине количество меняет уже, особенно на мобиле. либо картинку по центру делать, а весь текст под ней размещать блоками.

 

Expand  

В корзине и я так скрыл всё, что мог, но всё равно не влазит.

т.е. там надо вообще оставлять только название и цену - всё, количество не влазит, цена за единицу не влазит.

[Роман_DD 2]

  В 06.12.2019 в 11:52, support сказал:

В корзине и я так скрыл всё, что мог, но всё равно не влазит.

т.е. там надо вообще оставлять только название и цену - всё, количество не влазит, цена за единицу не влазит.

Expand  

Там очень много отступов и лишнего текста в мобильной... по хорошему под мобильную надо верстку другую показывать, а не только css. Кнопки количества убрать, вниз и вообще всю эту таблицу разбить

Количество

Блок цена

Тотал

Цена за все не нужна никому, они ж видят тотал и видят цену, остальное только путает.

Так можно еще картинку спокйно вверху оставить. Вобщем вбок не верстать ничего а сделать это на скользящих блоках чтобы друг под друга сваливались.

  В 06.12.2019 в 11:21, support сказал:

Поиск растянуть то не проблема, но я специально оставляю запас, что б было место добавить ещё ссылок в полоску.

В /templates/vamshop4/webslidemenu/webslidemenu.css поменяйте стиль li.wssearchbar

width: 20% поменяйте на width: 30%

Встречается 2 раза в файле, менять только 1 стиль, если второй поменять, тогда на небольшом экрана не влезут в 1 стркоу все ссылки, в том числе админка.

Хотя наверное можно и по умолчаию чуть увеличить, с 30% тоже место остаётся

В меню колонками выводятся подкатегории 2 уровня и 3 и 4.

А первый уровень колонками вряд ли получится сделать, тогда не будет места для 2, 3 уровней.

Хотя надо подумать, можно как-то определять, есть подкатегории или нет, если только 1 уровень, то вообще не показывать блок для второго уровня.

 

Expand  

Админка на мобильном все равно не работает и вообще админка это проблема админа, как по мне так эта ссылка вовсе лишняя в полоске. Мы же магазин не для админа делаем, а для покупателя. Вообще у меня сомнения в необходимости пихать меню и управление и корзину в одну строчку, но тут уж я даже не буду лезть :) Стиль я нашел, но почему0то больше 30 не дает, видимо там колонка, выпадают блоки управления. 

[support 447]

  В 06.12.2019 в 11:56, Роман_DD сказал:

Админка на мобильном все равно не работает и вообще админка это проблема админа, как по мне так эта ссылка вовсе лишняя в полоске. Мы же магазин не для админа делаем, а для покупателя. Вообще у меня сомнения в необходимости пихать меню и управление и корзину в одну строчку, но тут уж я даже не буду лезть :) Стиль я нашел, но почему0то больше 30 не дает, видимо там колонка, выпадают блоки управления. 

Expand  

Так ссылка Админка она и видна только админу, обычные посетители её никогда не увидят.

И больше 30 даёт, просто там стили ещё внизу, там ширина для 1200 и больше задаётся и для 1200 и меньше, в общем, всё в этом файле находится, все стили меню.

  В 06.12.2019 в 11:56, Роман_DD сказал:

Там очень много отступов и лишнего текста в мобильной... по хорошему под мобильную надо верстку другую показывать, а не только css. Кнопки количества убрать, вниз и вообще всю эту таблицу разбить

 

Expand  

Согласен.

Странца корзины и оформления заказ с итоговыми суммами особо не переделывались ещё.

Их надо допилить для смартфона, с этим не поспоришь.

 

[support 447]

Корзина тоже переделана.

В демке http://demo.vamshop.ru можно посмотреть как выглядит.

Корзина тоже сделана плитками, на смартфоне всё хорошо теперь со страницей корзины.