Minimizing white space on sides of page (minimal theme)

Solved
Highlighted
Excursionist
15 1 1

Hi!

 

I need some help on removing white spaces on the left and right side of the page so I can use all the available space not just the middle. Like f.ex. in this shop: https://theminimalistwomanshop.com/ 

 

My shop:https://www.lemadoro.it/

Mobile version is fine, but web/desktop one is looking really bad like that. 

 

Anyone can help?

 

 

 

0 Likes
Highlighted
Shopify Partner
297 56 71

Hello @Domiz,

                           Protected password? 

0 Likes
Highlighted
Excursionist
15 1 1

@Wahab_Ahmad Yep, sorry forgot about that. Just removed it.

0 Likes
Highlighted
Shopify Partner
297 56 71

@Domiz,

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

 

.wrapper {
padding: 0px !important;
box-sizing: border-box;
}


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

1 Like
Highlighted
Excursionist
15 1 1

@Wahab_Ahmad Thanks, but actually it changed my mobile version (and it doesn't look nice) but it didn't have any impact on my desktop/web version.

0 Likes
Highlighted
Shopify Partner
297 56 71

1. Go to Online Store->Theme->Edit code
2. Asset->theme.js->paste below code at bottom of the file

 

$('header>div').removeClass('wrapper')
$('main').removeClass('wrapper')


Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

1 Like
Highlighted
Excursionist
15 1 1

@Wahab_Ahmad Thank you! It worked perfectly :)

Just one thing... is it possible that the changes will apply just for header and Menu with underlines? Because now the tiles/boxes of Collection List are attached to the edge and they looked much better when there was a bit of space from the boarder. The same happened with subpages (account or catalog) and it doesn't look good.

 

Thanks in advance.

 

 

0 Likes
Highlighted
Explorer
56 2 19

@Domiz 

 

Go into theme.scss

 

Find the following

 

$width-site: 1280px;

(It might be $Sitewidth or something similar). For me it was line 329.

 

You can change the px value to set a fixed width. Or if you want a variable width depending on device/screen size, you can change it to a percentage.

 

$width-site: 90%;

This will mean there is always a 10% gap on the sides, regardless of device.

1 Like
Highlighted
Excursionist
15 1 1

@Daniel808 Thanks, but unfortunately it didn't work. Doesn't matter if I'm changing px or adding % nothing is changing on the page :(

0 Likes
Highlighted
Explorer
56 2 19

@Domiz 

 

Did you remove the code you added from the previous suggestions? If not, that may be interfering .

0 Likes