The changes described below are not visible within the editor. To check them, access the preview mode of your website or visit it online 💡
Display All Sections in Full Width on Both Desktop & Mobile
Copy the code below:
<style>
.block-layout, .block-layout--layout {
max-width: none !important;
padding: 0 !important;
}
</style>
Finally, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.
Display a Specific Section in Full Width
To make changes to a particular section only, you need to know the section ID. You can find it by inspecting your page with the help of developer tools in your browser:
On Both Desktop & Mobile
Copy the code below:
<style>
#sectionID div:nth-of-type(2) {
max-width: none !important;
padding-inline: 0 !important;
}
</style>
In the code, replace the sectionID with the actual ID of the section in question.
On Desktop
Copy the code below:
<style>
@media screen and (min-width: 920px) {
#sectionID div:nth-of-type(2) {
max-width: none !important;
}
}
</style>
In the code, replace the sectionID with the actual ID of the section in question.
On Mobile
<style>
@media screen and (max-width: 920px) {
#sectionID div:nth-of-type(2) {
max-width: none !important;
padding-inline: 0 !important;
}
}
</style>
In the code, replace the sectionID with the actual ID of the section in question.
Finally, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.