How to make a section full width on both mobile and desktop?

Store Design
, ,
1

Hi everyone,

I’m trying to make a specific section on my homepage full width (edge-to-edge), both on desktop and mobile. Right now, the content is contained within a boxed layout and doesn’t stretch across the entire screen.

I would like this section to ignore the theme’s default page width and go fully edge-to-edge.

Can someone help me ? Here is the website link : https://embrace-the-grind.com/

And here is the section that I want to put full width :

Capture d’écran 2026-04-23 à 19.12.35
Capture d’écran 2026-04-23 à 19.12.351018×1044 169 KB

Capture d’écran 2026-04-23 à 19.13.13
Capture d’écran 2026-04-23 à 19.13.131920×1129 312 KB

2

Hey @imazele

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.custom-section.custom-section--grid.custom-section--row-desktop.custom-section--column-mobile.color-scheme-1.mobile-hide .page-width.custom-section__inner, .custom-section.custom-section--grid.custom-section--row-desktop.custom-section--column-mobile.color-scheme-1.desktop-hide .page-width.custom-section__inner {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}
</style>

RESULT:

image
image374×668 76.2 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hey @imazele try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
.page-width.custom-section__inner {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 100% !important;
}
}
@media screen and (max-width: 767px) {
.page-width.custom-section__inner {
    padding-right: 0px !important;
    padding-left: 0px !important;
    max-width: 100% !important;
}
}

<style>

image
image352×517 59.1 KB

4

Please add this code to Custom CSS in Theme settings to do it

#shopify-section-template--27967017550157__custom_section_tcGrae .custom-section__inner,
#shopify-section-template--27967017550157__custom_section_HJkWVj .custom-section__inner {
padding: 0 !important;
max-width: 100% !important;
}
Best regards,

Dan from Ryviu: Product Reviews App

5

When in “Edit theme”, go to this section settings and paste this into “Custom CSS” setting:

{
  --page-width: none;
  --page-margin-mobile: 0;
  --page-margin-desktop: 0;
}

This would also remove padding on the section heading though. So you may either centre it, move it to a separate section or add this rule as well:

.group {
  padding-inline: 20px;
}