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

[susha]

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

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

Сайт http://marichay.ru

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

 

 

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

 

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

 

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

С телефонов:

 

С планшета:

Змінено 23 липня 2018 користувачем susha

[zlatoff]

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

[susha]

2 часа назад, zlatoff сказал:

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

 

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

 

 

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

 

Змінено 23 липня 2018 користувачем susha

[afinalux]

@susha

Как вариант:

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

.row .col-xs-8 {

float:none;

}

 

 

 

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

.row .col-xs-8 {

float:none;

}

.row .input-group {

margin-bottom: 10px;

}

 

[susha]

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

 

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

 

 

Змінено 24 липня 2018 користувачем susha

[afinalux]

@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;
}

 

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

 

[susha]

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

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

 

 

 

Змінено 24 липня 2018 користувачем susha

[afinalux]

@media (max-width: 767px) { //найдите это
//начало вставки
#product .btn-primary { 
margin-top:28px;
} 
//конец вставки

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

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

[susha]

16 часов назад, afinalux сказал:

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

 

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

[susha]

4 минуты назад, Pascha сказал:

Добавьте !important  

 

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

[susha]

Змінено 25 липня 2018 користувачем susha

[afinalux]

@susha

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

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

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

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

 

[Torvael]

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

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

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

 

Спойлер

 

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

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

Спойлер

 

Змінено 25 липня 2018 користувачем Torvael

[Torvael]

del.

 

 

Змінено 25 липня 2018 користувачем Torvael

[susha]

1 час назад, Torvael сказал:

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

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

 

 

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