• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Блоки в одну строку

Kimono

Форумчанин
Добрый день
Подскажите пожалуйста как отзывы и апселлы выставить на одном уровне? Раньше работало нормально, но после обновления вукомерса и темы немного поехали апселлы. Нужно просто апсселы поднять выше. Ссылка на проблему: http://vape-volt.ru/shop/aromatizatory/the-perfumers-apprentice/tpa-tfa-dragonfruit/

Работал до этого вот такой стиль. Сейчас код перестал рабоать и ничего не помогает (из того что смог своими силам)

.woocommerce div.product .woocommerce-tabs ul.tabs:before {
width: 100%;
}
div.woocommerce-tabs.wc-tabs-wrapper {
width: 100%;
float: left;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
width: 100%;
float: right;
}

@media (min-width: 990px) {
div.up-sells.upsells.products,
div.woocommerce-tabs.wc-tabs-wrapper {
width: 48% !important;
}
}
 

Kimono

Форумчанин
Код:
section {
    display: inline-block;
    float: right;
}
float: right; по желанию
Спасибо, это помогло. Но вид все-равно как после инсульта) Вот скрин. блок маленький и прижат к отзывам: https://yadi.sk/i/PTu5mamf3HLhMG Со старым кодом до обновления было выравнивание по блоку отзывов, плитка была больше, не было такого отступа, было примерно так: https://yadi.sk/i/6n3YTVL33HLgju
Я попытался все настроить заново, но не выходит, если убрать вот этот параметр: https://yadi.sk/i/SLjy4D3w3HLgqR
То всё становится более менее правильно, но при width: 100%; все-равно не растягивается всю ширину столбца от края до края(
Пробовал margin: 0; padding 0; ничего тоже не получилось. Может я не с тем стилем работаю.
На телефоне стало всё ещё грустнее. Отображение в одну колонку, а было в две. С этим тоже не смог побороться( скриншот https://yadi.sk/i/Ko2HLB7T3HLhtx

Может что-то мешает... Подскажите пожалуйста.
Сейчас код выглядит вот так:

.woocommerce div.product .woocommerce-tabs ul.tabs:before {
width: 100%;
}
div.woocommerce-tabs.wc-tabs-wrapper {
width: 100%;
float: left;
}
@media (min-width: 990px) {
div.up-sells.upsells.products,
div.woocommerce-tabs.wc-tabs-wrapper {
width: 48% !important;
}
}
section {
display: inline-block;
}
.woocommerce .products ul, .woocommerce ul.products {
margin: 1 1 1 1;
width: 100%;
}
 

qwer

Специалист
Местный
Нашла у вас ещё одну проблему см. скрин
upload_2017-4-25_18-19-40.png

Разрешение экрана 1920х1200, браузер Chrome, последняя версии
 

Kvistis

Опытный
Местный
Примерно похоже
Код:
.woocommerce .products ul, .woocommerce ul.products {
    margin: 0 0 0 4em;
    padding-top: 5em;
    width: auto;
}
padding и margin с их производными top, bottom, left. right, меняйте их
Отображение в одну колонку, а было в две. С этим тоже не смог побороться( скриншот https://yadi.sk/i/Ko2HLB7T3HLhtx
При изменении разрешения куча margin перекрывает друг друга
Код:
.woocommerce #page-wrapper .upsells.products ul.products li.product, .woocommerce #page-wrapper .related.products ul.products li.product {
    max-width: 150px;
    margin: 0 2% 30px 0; 
}
margin: 0 2% 30px 0; попробуйте эти значения для разных расширений поменять, может колонки поменяются
 

Kimono

Форумчанин
Код:
.woocommerce .products ul, .woocommerce ul.products {
    margin: 0 0 0 4em;
    padding-top: 5em;
    width: auto;
}
padding и margin с их производными top, bottom, left. right, меняйте их
Это конечно помогает. Этот способ я пробовал. Но результат плачевный. Апселлы конечно выравниваются, но главная страница товаров убегает. Скрин https://yadi.sk/i/Vx30pNNs3HPMo9

Такое ощущение что не к тому стилю обращаюсь, а к какому нужно я не могу понять(
Раньше можно было применить стили к div.up-sells.upsells.products но после обновления вукомерса уже нет такого дива

Помогите кто-нибудь пожалуйста разобраться...
Ссылка на страницу с апселами http://vape-volt.ru/shop/aromatizatory/the-perfumers-apprentice/tpatfa-lychee/
Ссылка на страницу с товарами http://vape-volt.ru/shop/

Код сейчас выглядит вот так:
Код:
.woocommerce div.product .woocommerce-tabs ul.tabs:before {
width: 100%;
}
div.woocommerce-tabs.wc-tabs-wrapper {
width: 100%;
float: left;
}
@media (min-width: 990px) {
div.up-sells.upsells.products,
div.woocommerce-tabs.wc-tabs-wrapper {
width: 48% !important;
}
}
section {
display: inline-block;
  margin: 0;
}
.woocommerce .products ul, .woocommerce ul.products {
    margin: 0 0 0 3em;
    width: 100%;
}
 

Kimono

Форумчанин
Всем спасибо, пока ждал помощи - сам выучил css. Тему можно закрыть, сам разберусь!
 
Сверху Снизу