Solved

DAWN THEME: CENTER PRODUCT INFORMATION TO PAGE

skymochi
Excursionist
34 0 3

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

 

Accepted Solution (1)
Team_OSC
Shopify Partner
118 16 18

This is an accepted solution.

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

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️

View solution in original post

Replies 12 (12)

Team_OSC
Shopify Partner
118 16 18

Hi @skymochi ,

 

Please share your website URL.

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️
skymochi
Excursionist
34 0 3

laddisahsi
Shopify Partner
383 38 40

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 </head> tag.

<style>
.product__info-wrapper.grid__item {
    margin-left: 6% !important;
    margin-top: 8% !important;
}
</style>

.

laddisahsi_0-1701670262127.png



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


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
skymochi
Excursionist
34 0 3

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 </Head>?

laddisahsi
Shopify Partner
383 38 40

@skymochi 

Just copy mine full code

<style>
.product__info-wrapper.grid__item {
    margin-left: 6% !important;
    margin-top: 8% !important;
}
</style>


Just paste in theme.liquid before closing the </head>

This code will work.

Thanks

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
skymochi
Excursionist
34 0 3

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

laddisahsi
Shopify Partner
383 38 40

@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



Please check

Thanks

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
skymochi
Excursionist
34 0 3

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

laddisahsi
Shopify Partner
383 38 40

Yes its for desktop only.

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
Team_OSC
Shopify Partner
118 16 18

This is an accepted solution.

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

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️
skymochi
Excursionist
34 0 3

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"?

Team_OSC
Shopify Partner
118 16 18
@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

- Need a Shopify Developer?

  Hire Me:  Upwork | Website:  Omni Site Creations
- Connect On: Chat on WhatsApp | Email: info@omnisitecreations.com
- Our Services:  Design Changes | Custom Coding | Modifications | New Website
- Your tip, my code.  Buy me a Coffee  ❤️