Re: Page widths

Solved

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

Printatme
Explorer
55 0 7

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.

 

Printatme_0-1710150403695.png

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

Printatme_1-1710150476577.png

 

My website is printreality.co.uk

 

Thanks

Accepted Solutions (3)

Moeed
Shopify Partner
5426 1467 1752

This is an 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:

Moeed_0-1710151567092.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

niraj_patel
Shopify Partner
2378 514 512

This is an 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>

techlyser_web_0-1710151655278.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]

View solution in original post

Anshul_arora
Navigator
453 128 97

This is an 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 =>

Anshul_arora_0-1710158302329.png


I hope this helps.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 4 (4)

Moeed
Shopify Partner
5426 1467 1752

This is an 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:

Moeed_0-1710151567092.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


niraj_patel
Shopify Partner
2378 514 512

This is an 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>

techlyser_web_0-1710151655278.png

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

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- [email protected]

Anshul_arora
Navigator
453 128 97

This is an 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 =>

Anshul_arora_0-1710158302329.png


I hope this helps.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Printatme
Explorer
55 0 7

@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;

Printatme_0-1710244564241.png

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.