Корзина заголовка витрины магазина WooCommerce: сделать содержимое раскрывающейся корзины шире и опустить влево (по правому краю)

Question

Я использую витрину магазина WooCommerce для своего сайта. Я бы хотел, чтобы содержимое выпадающего списка заголовков было шире и располагалось слева (по правому краю). Поскольку моя корзина заголовков находится в верхнем правом углу экрана, половина содержимого раскрывающейся корзины исчезает в правой части экрана. Как сделать так, чтобы содержимое корзины упало влево?

Я попробовал следующее:

CSS:

.site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 999999;
    font-size: .875em;
    left: -999em;
    display: block;
}

Мои изменения:

.site-header-cart .widget_shopping_cart {
    position: absolute;
    top: 100%;
    width: 300px;
    z-index: 999999;
    font-size: .875em;
    left: -999em;
    display: block;
        right: 0;
}

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

Answer 1

Удалите ваш CSS, не требуется абсолютная позиция, его позиционирование уже существует

.site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart {
    left: 0px;
    display: block;
}

это стандартная CSS для мини-тележки магазина, так как вы увидите, что левый установлен на 0, означая, что он всегда будет выходить за левый край верхнего элемента

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

   .site-header-cart.focus .widget_shopping_cart, .site-header-cart:hover .widget_shopping_cart {
        left: -120px;
        display: block;
    }