Align product to centre of the page

[HassanMakke]

Hi, 

I am using the Debutify theme and I have one of my collection that has only one product. I want to align this product to the centre of the page so it does not look odd on the side of the page. 

Thank you 

@dmwwebartisan 

[RM_Muzamil]

Hi bigmack, 

Goto your theme, click edit code, select collection and put <center> at the start of your product and add </center> at the end of your product then save it. Check your products now. It will work. 

[HassanMakke]

Should the collection be in the sections section?

[RM_Muzamil]

yes, in the collection section. where you added your single product.

[HassanMakke]

I was not able to locate the code section you mentioned. What I did is that I changed the desktop grid to 1 in collection.json section

However, this made the image really big, is there a way to make it smaller?

{
"sections": {
"collection-image": {
"type": "collection-image",
"settings": {
}
},
"breadcrumbs": {
"type": "breadcrumbs",
"settings": {
}
},
"main": {
"type": "collection-template",
"settings": {
"collection_tags_enable": false,
"collection_tags_count": false,
"collection_multiple_tags_filtering_enable": false,
"collection_sort_enable": false,
"tag_selector": "button",
"collection_layout": "grid_list",
"rows": "3",
"desktop_grid": "1",
"mobile_grid": "1"
}
}
},
"order": [
"collection-image",
"breadcrumbs",
"main"
]
}

[HassanMakke]

I am not sure where to find the product

[HassanMakke · Accepted solution]

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

.grid, .grid--rev, .grid--full, .grid-uniform {
display: flex;
    justify-content: center;
}

 Thanks to @KetanKumar 

[KetanKumar]

@HassanMakke 

thanks for it

[MichaelLing]

All, 

This shopify webpage-

https://www.genebiosystems.com/pages/supply-centres

Is not centered, rather it is on the right side of the page, it is not the alignment issue as you can see, as I tried to left align it, and it is still on the right half of the page. We are using the "Default page" theme. Any suggestion on how we can solve this issue, is highly appreciated. 

Michael

[KetanKumar]

@MichaelLing 

yes let me know how can i help you?

[MichaelLing]

I am new to the forum? How does it work? Are you able to post your suggestions here, to help me and everyone else?

[MichaelLing]

@KetanKumar 

We have this shopify webpage-

https://www.genebiosystems.com/pages/supply-centres

It Is not centered, rather it is on the right side of the page. We are using the "Default page" theme. Can you help on how we can solve this issue?

Michael

[KetanKumar]

@MichaelLing 

try this code

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

#MainContent > div.page-width > div > div {float: none;margin: 0px auto;}