Помощь Разные размеры картинок на мобильной версии сайта

[Dmitri123]

Разные размеры картинок на мобильной версии сайта и от этого появляются пробелы между товарами. Как сделать чтобы было как на десктопой версии?
На мобильной сейчас так -
Адрес сайта - Для просмотра ссылки Войди или Зарегистрируйся
Заранее спасибо!

 

[Dmitri123]

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

 

[Karlasan]

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

 

[Dmitri123]

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

Нету мобильной версии есть только CSS в котором под определенные размер экрана подбираются размеры но на мобиле если делаю чтоб не было пробелов то получается показывает левую часть фото а правая кудато проподает. Отцентровать по средствам CSS можно? Или лучше задать в шаблоне что если экран меньше чем ... то показывать мобильные фото?

 

[Karlasan]

Отцентровать по средствам CSS можно?

можно,для родительского блока задайте overflow:hidden, для картинки position:relative и left:-10px (это я для примера, сами точнее на месте выясните, сколько пикселей нужно). свойство left можно задать и в %, и вычислить в момент загрузки: left: calc(-20% + 20px). последний вариант работает только в современных браузерах. разумеется, эти все стили надо применять для мобильной верстки, засунув их в соответствующий блок @media в css-файле.
но я бы лучше сделал

или лучше задать в шаблоне что если экран меньше чем ... то показывать мобильные фото?

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

 

[Dmitri123]

можно,для родительского блока задайте overflow:hidden, для картинки position:relative и left:-10px (это я для примера, сами точнее на месте выясните, сколько пикселей нужно). свойство left можно задать и в %, и вычислить в момент загрузки: left: calc(-20% + 20px). последний вариант работает только в современных браузерах. разумеется, эти все стили надо применять для мобильной верстки, засунув их в соответствующий блок @media в css-файле.
но я бы лучше сделал

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

Хорошо, спасибо! Я насчет 2ого даже и неподумал изначально... все равно всё фото не влезит если с CSS отступами баловаться.