Перейти к содержанию
susha

Карточка товара поехала, нужна помощь

Рекомендуемые сообщения

Здравствуйте.

Поехала карточка товара с мобильных устройств.

Сайт http://marichay.ru

В данный момент с телефонов так (вертикальное и горизонтальное положение):

 

Screenshot_4.png.15ab811e7c09aedf05ee4b4d823a1f9a.pngScreenshot_35.png.023b8c6b18039e3cee51cd66d00eb74e.png

 

так с планшета:

Screenshot_2.png.79840dafb94580519aacd602c3c5fe76.png

 

Из-за торчащей кнопки "В корзину" появляется горизонтальная прокрутка.

 

Нарисовал как хотелось бы чтобы получилось:

С телефонов:

Screenshot_341.png.45f438bf5618f4b2915a343e40c2e097.pngScreenshot_351.png.c55eef49ede375df12e6ec2d90e13674.png

 

С планшета:

1710720341_Screenshot_2018-07-23-07-43-471(1).thumb.png.5ed980f202c5272560e0c5b50f896d4a.png

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В CSS @media запросами уменьшите размеры элементов для мобил и планшетов. Самое простое решение, без переверстки сетки товарной страницы.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, zlatoff сказал:

В CSS @media запросами уменьшите размеры элементов для мобил и планшетов. Самое простое решение, без переверстки сетки товарной страницы.

 

Кнопку "В корзину" уменьшил, для планшета помогло. А вот с телефоном нет.

 

493391176_Screenshot_4(2).png.4990b744c9599eb5b2b2c5f2e9c8cbe8.png

 

Подскажите, что нужно прописать в стилях чтобы получилось так:

 

Screenshot_4.png.6a5732888a075aaec64f2583aefade0f.png

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@susha

Как вариант:

Для мобильных разрешений(телефоны) пропишите CSS для элемента:

.row .col-xs-8 {

float:none;

}

screenshot-marichay.ru-2018_07.23-15-02-02.png.220b3829ae5c067398814e2ed9b48e4b.png

 

 

 

Для планшетов:

.row .col-xs-8 {

float:none;

}

.row .input-group {

margin-bottom: 10px;

}

 

screenshot-marichay.ru-2018_07.23-15-09-57.png.ce6c2b276e732fd90668beda97f85a04.png

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Что нужно прописать/изменить? в телефоне в вертикальном положении не помещается зеленая кнопка "В корзину".

Screenshot_22.png.bcef0315bfafec2d612fac22171c6325.png

 

Мне кажется идеально было бы если слово "Кол-во" для телефонов в вертикальном положении было бы сверху:

 

Screenshot_4.png.81d64dd477f67f9b8a63a64297e416a8.png

 

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@susha

Файл catalog/view/theme/default/stylesheet/stylesheet.css

Строка №1054

@media (max-width: 767px)
#product label {
    float: left;
    margin: 8px 9px 0 0;
}

Удалить оттуда "float:left;", чтобы было вот так:

@media (max-width: 767px)
#product label {
    margin: 8px 9px 0 0;
}

 

Строка  №1049

@media (max-width: 767px)
#product > .form-group .row div:first-child {
    padding-right: 0px;
    margin-top: 25px;
    min-width: 210px;
}

Удалить оттуда "margin-top: 25px;",  и заменить "min-width: 210px;" на "min-width: 180px;" чтобы было так:

@media (max-width: 767px)
#product > .form-group .row div:first-child {
    padding-right: 0px;
    min-width: 180px;
}

 

Получится так:

screenshot-marichay.ru-2018_07.24-16-31-17.png.975da908f4096cdc177be6112aad2f1f.png

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@afinalux  Благодарю вас за помощь, всё получилось, ещё вопрос:

Как можно выровнить кнопку с полем? немного не подходит на мобильных устройствах на 3px, на компьютере - всё ровно.

 

Screenshot_24.png.76479d85f978649496989c5dc8497ee9.png

 

 

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
@media (max-width: 767px) { //найдите это
//начало вставки
#product .btn-primary { 
margin-top:28px;
} 
//конец вставки

} //конец зоны вставки

Надеюсь понятно объяснил =)

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
16 часов назад, afinalux сказал:

Надеюсь понятно объяснил =) 

 

Вставил так, но не срабатывает. Не туда? или не так?

Screenshot_26.png.3726eb916e625319f107ec33e2a7e031.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добавьте !important 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, Pascha сказал:

Добавьте !important  

 

Спасибо. Всё получилось.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

:)

Изменено пользователем susha

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@susha

У вас не совсем получилось =)

Ваше правило не работает.

Работает другое(стока 610): 


#product .btn-primary {
    margin-top: 27px !important;
}

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@susha Давайте попробуем так

Удалите строчку в stylesheet.css

	#product .btn-primary { 
    margin-top:27px !important;  
}

 

Спойлер

188289424_.thumb.jpg.d3b8d1169068bdddfc3fa3d785926c1b.jpg

 

Добавляйте в новую строку

@media only screen and (min-width: 768px) and (max-width: 1200px) {
 #product .btn-primary {
 margin-top: 26px !important;
}
}
Спойлер

1251848529_.thumb.jpg.6d847ebc56e4a077421a4c246c076d22.jpg

 

Изменено пользователем Torvael
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

del.

 

 

Изменено пользователем Torvael

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Torvael сказал:

@susha Давайте попробуем так

Добавляйте в новую строку

 

 

Добавил. Спасибо за помощь.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Если морочите голову ТС,  то объясняйте чего он там вставляет и зачем

btn-primary - это стандартный класс бутстрапа для определенного вида кнопки, 

То есть для корректного отображения отличного от стандартного,  следует прописать свои стили,  при этом применив !important - приоритет прописанного параметра (при совпадении анологичного кода в коде бутстрап), так как правило собственные стили Вы пишите в своем файле, а не правите собственно стили бутстрап)

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

Первоначально Вы прописали только для 768рх, но другие остались по дефолту, все просто. 

Последнее решение более стандартно ( но такие решения не всегда работают)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.