How can I adjust my webpage width on desktop?

[stefan25]

Hello,

My page width on desktop is just way too large in the homepage and in the product page. I'd like to be some space on the margins at least at the collections in the homepage and in the product page because it is just way too wide. Can you help me? Here is a link of my store to see what I am talking about: https://thelavishcorner.com/ password bareon1403

Here is how I'd like to look like as page width:

https://lightsofscandinavia.com/

Thank you for your time,

Stefan

[niraj_patel]

hello @stefan25 

You can add code by following these steps to reduce page width space

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>
@media screen and (min-width: 750px){
.page-width {
max-width: 1200px !important;
}
}
</style>

[stefan25]

Thank you for our answer, however, now, it is just too narrow and moreover, it affects everything, the search and add to cart icon are just way too centered etc. I just want my collections and product pages and not everything do you know how I can do that?
Thank you!

now, it is like this: 

https://thelavishcorner.com/?_ab=0&_fd=0&_sc=1

[niraj_patel · Accepted solution]

You can add code by following these steps to reduce page width space on product page and Homepage collection list

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>
@media screen and (min-width: 750px){
.collection-list-wrapper.page-width,#MainContent .page-width{
max-width:1200px !important
}
}
</style>

[CoastalGlowSunl]

Hi - I just tried this and it works great; however, not it is condensing my images and showing 1/2 of 1 and 1/2 of the other image...any suggestions? My website it password protected right now. 

[PageFly-Victor]

Hi @stefan25 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

<style>

@media screen and (min-width: 767px){

.collection-list-wrapper.page-width.isolate.page-width-desktop.no-heading.no-mobile-link.section-template--17615403843848__collection-list-padding {

    max-width: 1200px !important;

    width: 100%;

}

}

</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[GemPages]

Hi @stefan25,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

1. Go to Edit code on Online Store:

2. add my code  above the </body> tag on Theme.liquid:

<style>
	@media(min-width: 767px) {
		#shopify-section-template--17615403843848__collection-list .collection-list-wrapper {
			max-width: 1200px !important;
		}
	}
	
</style>

Hope you find my answer helpful!

Kind & Best regards,
GemPages Support Team.

[cccosmetics]

1. Go to Online Store -> Theme -> Edit code.

2. Open yoursettings_schema.json

3. Find "id:page_width"

4. Change to "max" to the number you like

5. Go to Online Store -> Theme -> Customize.

6.Click on "Theme settings", on Layout

7.Ajust your page width, and the maxinum will the number you set up in the Code.