{"id":622,"date":"2023-09-12T07:18:07","date_gmt":"2023-09-12T07:18:07","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2023\/09\/12\/8360133-hostinger-website-builder-how-to-display-a-section-in-full-width\/"},"modified":"2026-03-16T12:12:02","modified_gmt":"2026-03-16T12:12:02","slug":"8360133-hostinger-website-builder-how-to-display-a-section-in-full-width","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8360133-hostinger-website-builder-how-to-display-a-section-in-full-width\/","title":{"rendered":"Hostinger Website Builder: How to Display a Section in Full Width"},"content":{"rendered":"

All website templates that are available with Hostinger Website Builder<\/a><\/b> follow responsive web design<\/a><\/b> that ensures the best user experience across all devices. Responsive web design means that your website content will automatically adapt<\/b> – slightly stretch or shrink – depending on your website visitor’s device<\/b> properties <\/b>(its screen size, resolution, etc.). You can learn more about it here<\/a><\/b>. <\/p>

\n<\/p>

To display full width sections your website to have the sides or edges of your website fully streched, you would be disabling part of the responsive layout by adding the codes below, so have in mind that depending on the visitor’s device properties, the displayed content result may distort your website’s layout.<\/p>

\n<\/p>

\n

The changes described below are not visible within the editor<\/b>. To check them, access the preview mode<\/a><\/b> of your website or visit it online<\/b> 💡 <\/p>\n<\/div>

\n<\/p>

\n<\/p>

Display All Sections in Full Width on Both Desktop & Mobile<\/h2>

Copy the code below:<\/p>

<style>
    .block-layout, .block-layout--layout {
        max-width: none !important;
        padding: 0 !important;
    }
<\/style><\/code><\/pre>
Finally, go to your website’s Settings<\/b> → Integrations<\/b>, and paste the code in the Custom code<\/a><\/b> field. Then, save the changes<\/b> and update your website<\/b>.<\/p>
\n<\/p>
Display a Specific Section in Full Width <\/h2>
To make changes to a particular section only, you need to know the section ID<\/b>. You can find it by inspecting your page<\/a><\/b> with the help of developer tools in your browser:<\/p>
\n<\/p>
\"Inspecting<\/div>
On Both Desktop & Mobile <\/h3>
Copy the code below:<\/p>
<style>
    #sectionID div:nth-of-type(2) {
        max-width: none !important;
        padding-inline: 0 !important;
    }
<\/style><\/code><\/pre>
In the code, replace the sectionID<\/b> with the actual ID of the section in question.<\/p>
\n<\/p>
On Desktop <\/h3>
Copy the code below:<\/p>
<style>
    @media screen and (min-width: 920px) {
        #sectionID div:nth-of-type(2) {
            max-width: none !important;
        }
    }
<\/style><\/code><\/pre>
In the code, replace the sectionID<\/b> with the actual ID of the section in question.<\/p>
\n<\/p>
On Mobile<\/h3>
<style>
    @media screen and (max-width: 920px) {
        #sectionID div:nth-of-type(2) {
            max-width: none !important;
            padding-inline: 0 !important;       
 }
}
<\/style><\/code><\/pre>
In the code, replace the sectionID<\/b> with the actual ID of the section in question.<\/p>
\n<\/p>
Finally, go to your website’s Settings<\/b> → Integrations<\/b>, and paste the code in the Custom code<\/a><\/b> field. Then, save the changes<\/b> and update your website<\/b>.<\/p>
\n<\/p>
\n
The full width section can be applied to all sections inside the website except the header section.<\/p>\n<\/div>
\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Displaying website sections in full width with Hostinger Website Builder<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[281],"tags":[],"class_list":["post-622","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8360133-hostinger-website-builder-how-to-display-a-section-in-full-width\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/8360133-hostinger-website-builder-como-mostrar-una-seccion-en-ancho-completo\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=622"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/622\/revisions"}],"predecessor-version":[{"id":2818,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/622\/revisions\/2818"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}