I try to center box with product details: enter image description here

So, in list.phtml I found code responsible for this box.

<div class="product details product-item-details">
                        <hr />
                            <h5 class="product name product-item-name">
                            $optionText = '';
                            $attr = $_product->getResource()->getAttribute('mgs_brand');
                            if ($attr->usesSource()) {
                               $optionText = $attr->getSource()->getOptionText($_product->getMgsBrand());
                        <?php if($optionText){ ?>
                            <div class="brand-name"><?php echo $optionText ?></div>
                        <?php } ?>

                                                <a class="product-item-link" href="<?php echo $_product->getProductUrl() ?>">
                                    <?php echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>

                            <?php if(!$themeHelper->getStoreConfig('mpanel/catalog/review')): ?>
                                <?php echo $block->getReviewsSummaryHtml($_product, $templateType,true); ?>
                            <?php endif ?>

                            <?php echo $block->getProductPrice($_product) ?>

                            <?php echo $block->getProductDetailsHtml($_product); ?>
                            <?php if ($themeHelper->getStoreConfig('mpanel/catalog/disable_add_to_cart') == 0 && $themeHelper->getStoreConfig('mpanel/catalog/disable_hover_effect') == 1): ?>
                                <?php if ($_product->isSaleable()): ?>
                                        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                        <form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $this->getUrl('checkout/cart/add', ['uenc'=>$postParams['data']['uenc'], 'product'=>$postParams['data']['product']]); ?>" method="post">
                                            <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
                                            <input type="hidden" name="uenc" value="<?php /* @escapeNotVerified */ echo $postParams['data']['uenc']; ?>">
                                            <input name="form_key" type="hidden" value="<?php echo $this->getFormKey() ?>" />
                                            <button class="action tocart btn-cart hover_effect" type="submit" title="<?php /* @escapeNotVerified */ echo __('Add to Cart') ?>">
                                                <span class="icon pe-7s-shopbag"></span>
                                                <span class="text"><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                <?php endif ?>
                            <?php endif ?>

In CSS file in section:

// Products Grid

I see code:

.product-item-details {
    padding-top: 11px;
    .product-item-name {
        margin-bottom: 6px;
        line-height: 1.1;
        a {
            color: #222;
            font-size: 14px;
            font-weight: 500;
            &:hover {
                color: @base-color;
    .product-reviews-summary, .product.description {
        margin-top: 8px;

after .product-item-details { I add code: float: left;

After update file I try delete generated folder and deploy system again. No result.

Any solution?

  • Can you provide the URL ? – PЯINCƏ Jan 21 at 22:32
  • You can check in Gerris.pl – Sylvester Jan 22 at 8:28
.products .product.name, .products .rating-result, .products a.product-item-link, .products .price-box {
    display: table;
    margin-right: auto;
    margin-left: auto;

.products .product-items .product-item-info .rewards__product-points .price {
    color: #878787 !important;
    left: 150px;
    position: absolute;
    margin: 20px 0 0 0;


enter image description here

  • I add to custom style in backend: prnt.sc/mah2ms but after refresh cache still I not see any changed in frontend – Sylvester Jan 22 at 9:46
  • The properties are not present in the website, please try to add them instead in app/design/frontend/Mgs/claue/Magento_Theme/web/css/theme.css then deploy the static content and clean cache – PЯINCƏ Jan 22 at 9:53
  • Also now I'm try to add this code to end of file theme.css and try deploy but still no result :( – Sylvester Jan 22 at 10:27
  • I don't know why but it should work, look my update – PЯINCƏ Jan 22 at 11:49
  • I accept your answear because you have right and should be all work. I try delete static frontend because I think there are no visible css changes on the frontend – Sylvester Jan 22 at 12:34

It's difficult to tell without knowing what theme you have, or seeing the rest of the CSS and surrounding HTML, but depending on what you want you could either add text-align: center; to .product-item-details to center the text, or set a limited size on the .product-item-details container (maybe a width: 60%) and margin: 0 auto; to center the box with the left-aligned content still in it.


.brand-name { float : right; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.