Can the 'Sense theme' be adjusted for full website width?

[Printatme]

Hi,

I am using the 'Sense theme'. I would appreciate if anyone could let me know if it's possible to make the whole website full width. So at the moment there is a lot of space from right to left example below.

I would like it for both desktop and mobile version to work, to be more like the example below.

My website is printreality.co.uk

Thanks

[Moeed · Accepted solution]

Hey @Printatme 

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>
.scroll-trigger.animate--slide-in {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[niraj_patel · Accepted solution]

Hello @Printatme 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .page-width{
     margin: unset !important;
     padding: unset !important;
     max-width: 100% !important;
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Moeed · Accepted solution]

Hey @Printatme 

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>
.scroll-trigger.animate--slide-in {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[niraj_patel · Accepted solution]

Hello @Printatme 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .page-width{
     margin: unset !important;
     padding: unset !important;
     max-width: 100% !important;
 }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Anshul_arora · Accepted solution]

Hello @Printatme ,

Kindly add the below mentioned code at the bottom of your base.css file for utilizing full width and removing unnecessary space.

.page-width {
max-width: 100% !important;
}

Output =>

I hope this helps.

Please share if you have any query.

Thank you.

[Printatme]

@Anshul_arora @niraj_patel @Moeed  thank you all for your kind replies and help. All 3 codes work in filling the page further.

However I have come across some further enquiries. Please see image below;

The main questions are if you could help me centre the text again as it's thrown it off for some elements and the page width on my product pages is more to the left than to the right and not everything is full width either?

It would be very kind if you could help with a solution to this.

Thank you.