Pas totalement valide car ajoute un léger scroll horizontal
Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.
|
1 2 3 4 5 6 |
width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; |
Un *tain d’exemple qui marche:
Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="staticBlock staticBlock-oad"> <div class="full-width"> <div class="container"> <div class="row"> <div class="col"> <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" /> </a> <p><?= __('Opti tagline'); ?></p> <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <?= __('Access Opti'); ?> </a> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.staticBlock { &-oad { background-color: #eee; .full-width { position: relative; padding-top: 15px; padding-bottom: 15px; &:before, &:after { z-index: -1; top: 0; display: block; content: ""; position: absolute; width: 50%; height: 100%; background-color: #eee; } &:before { left: -50%; } &:after { right: -50%; } } } } |
Une alternative intéressante
Notamment si l’élément doit se retrouver en sticky à un moment donné.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@media screen and (min-width: @screen-lg-min) { .refinement-facets-list.affix { width: 1200px; z-index: 1000; border-bottom: 1px solid #ededed; background: @page-background-color; &:before, &:after { content: ""; display: block; position: fixed; width: 50%; height: 51px; border-bottom: 1px solid #ededed; background: @page-background-color; } &:before { left: -50%; } &:after { right: -50%; } } } |