Solved

How to make page width full screen in Debut theme?

imexmodelco2
Tourist
10 0 3

Hello, we'd like to eliminate all of the blank space on our site, and have it be full screen width. Store is https://www.imexrc.com/ , not password protected.

 

I've tried some snippets of code from other answers on the forum regarding Debut specifically, but none did anything.

 

We'd like featured collections, image galleries, collection pages, etc. to span the full width of the screen. It appears to be full width in the editor but everything except the gallery at the bottom of our home screen does not show full width.

 

Screenshot 2023-06-19 115101.png

Screenshot 2023-06-19 114741.png

Thank you to anyone who can help. 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5457 1314 1614

This is an accepted solution.

Hi @imexmodelco2 ,

Do you want this section only will be full width? I set full width for the whole section in the page. 

This one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.page-width {
    max-width: 100%;
}

Result:

Ribe_Dagandara_0-1687195895450.png

If you like this area only. Tty this. 

div#shopify-section-1612202921e642816a .page-width {
    max-width: 100%;
}

Result:

Ribe_Dagandara_1-1687196059036.png

I hope it help.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

miguel_liquify
Shopify Partner
176 18 16

You can go to the theme.css file find the class .page-width and change max-width to 100%
I don't recommend this beacause in larger screens is going to look bad , so my recommendations is to set it to 1920px

★★★ Need help setting up your Shopify store? Hire me here: https://liquify.design ★★★
imexmodelco2
Tourist
10 0 3

Is there a faster way to locate the .page-width? The theme.css is 7,000 lines long. 

Made4uo-Ribe
Shopify Partner
5457 1314 1614

This is an accepted solution.

Hi @imexmodelco2 ,

Do you want this section only will be full width? I set full width for the whole section in the page. 

This one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.page-width {
    max-width: 100%;
}

Result:

Ribe_Dagandara_0-1687195895450.png

If you like this area only. Tty this. 

div#shopify-section-1612202921e642816a .page-width {
    max-width: 100%;
}

Result:

Ribe_Dagandara_1-1687196059036.png

I hope it help.

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


imexmodelco2
Tourist
10 0 3

This worked, thank you so much! 

Made4uo-Ribe
Shopify Partner
5457 1314 1614

Glad it work, Welcome.😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com