Escape higher level div css in HTML

Question

Let me give an example of my problem: I'm working with magento (just explaining) and i want to make a full-width banner. Perhaps, Magento by default place a

class="container"

div that limit the width for the custom grid they have. So, i don't know what to do to get the full-width banner when it's placed (forced by Magento structure) inside a div with max-width setting.

In fact, i did some "margin" and "padding" configuration, but i'm trying to avoid this exaustive path just for one banner.

Here is my example: https://jsfiddle.net/mq4sr8d8/1/

<div class="background-size"><div class="outside"><div class="inside"></div></div></div>

score 0 · Answer 1 · answered May 09 '18 at 13:30

You can achieve what you want in - if the outside div is centred, you need the following styles for inside:

.inside {
  background-color: #ababab;
  width: 100vw;                   /* make as wide as viewport */
  margin-left: 50%;               /* move it 50% right width of container */
  transform: translateX(-50%);    /* move it 50% left width of itself (to make it start at beggining of screen */
  height: 100%;
}

Centred container fiddle

If your container is left aligned, just add the width:100vw

Left container fiddle

Escape higher level div css in HTML

1 Answers1