Center align items on specific product page

Store Design
1

Hello,

I have a specific product page with no image that I would like to have centered, I have previously added a marker so I can apply CSS specifically to this page, but im unsure how I can center the information on desktop as well as mobile. This is how it currently looks:

Screen Shot 2022-08-13 at 6.58.56 PM.png
Screen Shot 2022-08-13 at 6.58.56 PM.png3442×1696 366 KB

link: https://hideawayhilo.com/products/private-shopping-appointment

I would just like that information all centered on the page

1 Like
2

@jskoiz

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
#private-shopping-appointment .Product__InfoWrapper {
    left: 0;
}

#private-shopping-appointment .Product__Info {
    margin: 0px auto;
}

#private-shopping-appointment .ProductMeta__Title {
    text-align: center;
    margin-top: 30px;
}
3

@jskoiz

Please add the following code.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste the below code at the bottom of the file.
#private-shopping-appointment .Product__InfoWrapper {
    left: 0;
}

#private-shopping-appointment .Product__Info {
    margin: 0px auto;
}

#private-shopping-appointment .ProductMeta__Title {
    text-align: center;
    margin-top: 30px;
}

Thanks!