1

I am trying to add a full-width background to the related products on my magento 2 site extending the luma theme. the problem i am having is that the background is being applied but the left/right is then pushing the products out of view

in my less I have

.bg-white-fog {
    background: @color-white-fog;
}

.hundred-vw {
        margin-left: calc(50% - 720px);
        margin-right: calc(50% - 720px);
}

in my items.phtml I have added the section tag to wrap it

<?php if ($exist):?>
  <section class="bg-white-fog similar-products hundred-vw">
    <?php if ($type == 'related' || $type == 'upsell'): ?>
        <?php if ($type == 'related'): ?>
            <div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"relatedProducts":{"relatedCheckbox":".related.checkbox"}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
        <?php else: ?>
            <div class="block <?= /* @escapeNotVerified */ $class ?>" data-mage-init='{"upsellProducts":{}}' data-limit="<?= /* @escapeNotVerified */ $limit ?>" data-shuffle="<?= /* @escapeNotVerified */ $shuffle ?>">
        <?php endif; ?>
    <?php else: ?>
        <div class="block <?= /* @escapeNotVerified */ $class ?>">
    <?php endif; ?>
    <div class="block-title title">
        <h3 class="<?= /* @escapeNotVerified */ $class ?>" id="block-<?= /* @escapeNotVerified */ $class ?>-heading" role="heading" aria-level="2"><?= /* @escapeNotVerified */ $title ?></h3>
    </div>
    <div class="block-content content" aria-labelledby="block-<?= /* @escapeNotVerified */ $class ?>-heading">
        <?php if ($type == 'related' && $canItemsAddToCart): ?>
        <div class="block-actions">
            <?= /* @escapeNotVerified */ __('Check items to add to the cart or') ?>
            <button type="button" class="action select" role="select-all"><span><?= /* @escapeNotVerified */ __('select all') ?></span></button>
        </div>
        <?php endif; ?>
        <div class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
            <ol class="products list items product-items">
                <?php $iterator = 1; ?>
                <?php foreach ($items as $_item): ?>
                <?php $available = ''; ?>
                <?php if (!$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
                    <?php if (!$_item->getRequiredOptions()): ?>
                        <?php $available = 'related-available'; ?>
                    <?php endif; ?>
                <?php endif; ?>
                <?php if ($type == 'related' || $type == 'upsell'): ?>
                    <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="item product product-item" style="display: none;">' : '</li><li class="item product product-item" style="display: none;">' ?>
                <?php else: ?>
                    <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
                <?php endif; ?>
                <div class="product-item-info <?= /* @escapeNotVerified */ $available ?>">
                    <?= /* @escapeNotVerified */ '<!-- ' . $image . '-->' ?>
                    <a href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>" class="product photo product-item-photo">
                        <?= $block->getImage($_item, $image)->toHtml() ?>
                    </a>
                    <div class="product details product-item-details">
                        <strong class="product name product-item-name"><a class="product-item-link" title="<?= $block->escapeHtml($_item->getName()) ?>" href="<?= /* @escapeNotVerified */ $block->getProductUrl($_item) ?>">
                            <?= $block->escapeHtml($_item->getName()) ?></a>
                        </strong>

                        <?= /* @escapeNotVerified */ $block->getProductPrice($_item) ?>

                            <?php if ($templateType): ?>
                                <?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
                            <?php endif; ?>

                            <?php if ($canItemsAddToCart && !$_item->isComposite() && $_item->isSaleable() && $type == 'related'): ?>
                                <?php if (!$_item->getRequiredOptions()): ?>
                                    <div class="field choice related">
                                        <input type="checkbox" class="checkbox related" id="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>" name="related_products[]" value="<?= /* @escapeNotVerified */ $_item->getId() ?>" />
                                        <label class="label" for="related-checkbox<?= /* @escapeNotVerified */ $_item->getId() ?>"><span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span></label>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>

                            <?php if ($showAddTo || $showCart): ?>
                                <div class="product actions product-item-actions">
                                    <?php if ($showCart): ?>
                                        <div class="actions-primary">
                                            <?php if ($_item->isSaleable()): ?>
                                                <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                    <button class="action tocart primary" data-mage-init='{"redirectUrl": {"url": "<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}' type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                    </button>
                                                <?php else: ?>
                                                    <?php $postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
                                                    $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                    ?>
                                                    <button class="action tocart primary"
                                                            data-post='<?= /* @escapeNotVerified */ $postData ?>'
                                                            type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                    </button>
                                                <?php endif; ?>
                                            <?php else: ?>
                                                <?php if ($_item->getIsSalable()): ?>
                                                    <div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
                                                <?php else: ?>
                                                    <div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
                                                <?php endif; ?>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>

                                    <?php if ($showAddTo): ?>
                                        <div class="secondary-addto-links actions-secondary" data-role="add-to-links">
                                            <?php if ($addToBlock = $block->getChildBlock('addto')): ?>
                                                <?= $addToBlock->setProduct($_item)->getChildHtml() ?>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?= ($iterator == count($items)+1) ? '</li>' : '' ?>
                <?php endforeach ?>
            </ol>
        </div>
    </div>
</div>
</section>
<?php endif;?>
-1

To providing full width you have to move that particular element from main referenceContainer

Use <move> layout instruction for example :

<move element="name.of.your.related.product.block" destination="page.bottom.container" before="name.of.element.before"/>

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.