By default, ID7 constrains all UI elements into the fixed width container (.id7-fixed-width-container).
Some designs call for an approach with the illusion of a fluid width container, but where the content is still constrained within a fixed width container for readibility and accessibility purposes. This can then be supplemented with large hero imagery that breaks out of the fixed width container entirely.
Either include id7-borderless.css instead of id7.css, or if you are building your own assets,
set the LessCSS variable:
@borderless-container: false; // Set to true to have a borderless container
With a borderless container, the .id7-left-border and .id7-right-borders are hidden so
no imagery is needed. All imagery must now support up to 3000px wide, including the masthead image.
You may consider using a gradient rather than an image for the masthead, both to save page weight and to reduce
the need to generate such images:
.id7-utility-masthead {
background-image: linear-gradient(120deg,#0e7191 20%,#6ee6de 70%,#1b7c97);
}Breaking out of the container
You can use elements with the class .id7-container-breakout to have elements that are flush to the
entire width of the screen (note that you may lose between 10px and 20px at each side of this due to browser
limitations when there is a vertical scrollbar).
You can use Bootstrap responsive embeds to embed content based on an aspect ratio, rather than specifying an explicit width and height. For example:
<div class="id7-container-breakout">
<p class="embed-responsive embed-responsive-3by1">
<img class="embed-responsive-item" src="https://picsum.photos/3000/1000">
</p>
</div>
As well as the default .embed-responsive-16by9 and embed-responsive-4by3 aspect ratios
supported by Bootstrap, ID7 adds three others:
.embed-responsive-5by4.embed-responsive-3by2.embed-responsive-3by1