Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

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

Сайт 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
Надіслати
Поділитися на інших сайтах


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
Надіслати
Поділитися на інших сайтах


@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
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.