Dawn theme: center product information to page

Store Design
, , , ,
1

Hi, in need of some assistance!

GOALS:

  1. CENTER PRODUCT INFORMATION TO RED BOX OUTLINED

  2. CENTER TEXT OF PRODUCT INFORMATION.

CURRENTLY: USING

{
text-align: center;
}

However, the price, out of stock, and share button do not center.

Screenshot 2023-12-03 at 9.46.04 PM.png
Screenshot 2023-12-03 at 9.46.04 PM.png2876×1638 763 KB

2

Hi @skymochi ,

Please share your website URL.

3

Hi @skymochi

You can follow the following steps:

  1. Please remove the width from the html.
  2. Please go to the Online Store.
  3. Then Edit Code.
  4. Please find the theme.liquid file.
  5. Please add code before closing the tag tag.

.

laddisahsi_0-1701670262127.png
laddisahsi_0-1701670262127.png1439×717 223 KB

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

4

https://07f83a.myshopify.com/products/dress
password: koredoko

5

Hi, I am a bit confused, I tried to put this in liquid but it had no effect.

What width am I removing? And where do I add ?

6

@skymochi

Just copy mine full code

Just paste in theme.liquid before closing the

This code will work.

Thanks

7

Thank you, do you have a solution to center PRICE + OUT OF STOCK + SHARE?

8

@skymochi

Use this css

p#Inventory-template--15425262977097__main {
    margin-left: 36% !important;
}

#price-template--15425262977097__main .price.price--large.price--sold-out.price--show-badge {
    margin-left: 10% !important;
}

laddisahsi_0-1701671909314.png
laddisahsi_0-1701671909314.png1390×757 224 KB

Please check

Thanks

9

Hi, Thank you.
Last question. Is there to isolate the margin to DESKTOP ONLY? On mobile, it created a white area that moved information into this space.

margin-left: 6% !important;

IMG_4449.jpg
IMG_4449.jpg1170×2532 153 KB

10

Yes its for desktop only.

11

Hi @skymochi ,

This is the code for share button to center

.share-button__button {
margin-left: auto;
margin-right: auto;
}

To fix on the mobile

Here is the code,

@media (max-width: 765px){
.product__info-wrapper.grid__item {
     margin-top: 0 !important; 
     margin-left: 0 !important;
}
}

Paste this code with @laddisahsi gave you.

Hope this code will work.

Best Regards

Team_OSC

12

Mobile is now centered! However, when I swipe left, there is an overflow. It extends that white boundary from the screenshot in my last message. Only when it’s swiped upon. Is there a way to remove the “padding”?

13 
@media screen and (max-width: 749px) {
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: -1rem;
    margin-right: 0;
}
}

Hope this code will work to hide overflow.

Best Regards

Team_OSC