The content wrapper is a pre-made ScandiPWA component that is used for wrapping certain pages and/or blocks giving the same padding and maximum width for them. By default, it is rendered as <section> but if isNotSection prop is passed as true, <div> will be rendered. It is giving the possibility to keep pages layout consistent with the correct properties.
<aside> ℹ️ Usually, styling this element takes from-to: 1-3h
</aside>
Element is used almost on every page (for example on the default Home Page it is not present) as a wrapper for the content.
<aside> ➡️ No need to include media breakpoints in the base template. The default ScandiPWA media breakpoints will be used. They are as follows:
Display the content wrapper separately on the page. Can use separate art-board. Can replicate the grid layout of Figma.
Specify padding from left and right (in case the maximum width is reached, we should keep some padding from the sides of the screen) and the maximum width to grow, if the screen is wider than the content.
.jpg)
An example display of wrapper width
In ScandiPWA, many content elements are contained in the ContentWrapper component. The purpose of this component is to provide consistent width limiting to the content for improved readability.
Commonly, you might need to change the max-width value. That's as easy as overriding the ContentWrapper and extending the styles – all you need to do is change the value of the CSS variable that is used for the content width:
Create ContentWrapper.override.style.scss and update --content-wrapper-width variable.
:root {
--content-wrapper-width: 1440px; // default is 1400px
}
Additionally, you will need to update padding-inline for each breakpoint accordingly to the designs. Keep in mind, that we have 4/8pt grid system which should be followed to determine padding and spacing between elements.
CmsPage route and its content is not wrapped in the ContentWrapper therefore padding should be added to .CmsPage-Wrapper_page_width_default class in the CmsPage.override.style.scss:
.CmsPage {
&-Wrapper {
&_page_width {
&_default {
padding-inline: 144px;
@include mobile {
padding-inline: 35px;
}
@include tablet {
padding-inline: 64px;
}
}
}
}
}
<aside>
➡️ max-width for content wrapper should be the value that is equal to a maximum width of the widest screen displayed in design breakpoints, value should not change.
</aside>
To style a component, override its .style.scss file. You can also customize how it is rendered by overriding the .component.js file.
How to override JavaScript classes?