Solved

Product Title On Product Page Centering - For Impact Theme

NashMashPets
Excursionist
22 0 4

It has been difficult to find the coding for centering product titles on the product page. This is more in depth of a project though. I am trying to center the product titles of the product page on mobile only. I do not believe centering on the desktop is noteworthy. Finding a code for this has been difficult to find. I am stuck. Site: nashmashpets.com

 

 

NashMashPets.com
Accepted Solutions (3)

MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

I understand you want something like this.

 

Please add this code to your theme.liquid file, after <head> element in Online Store > Themes > Edit code.

 

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center;
    }
}
</style>

 

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

Sorry little mistake. Try again 🙂

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
      justify-content: center!important;
    }

    .product-info__price {
      text-align: center!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

Hi @NashMashPets, Maybe it could be of use to you.

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
        justify-content: center!important;
    }

    .product-info__price {
        text-align: center!important;
    }
    
    .product-info__vendor {
        text-align: center!important;
    }

    .product-info__price .rating {
        margin-inline-start: 0!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

Replies 19 (19)

MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

I understand you want something like this.

 

Please add this code to your theme.liquid file, after <head> element in Online Store > Themes > Edit code.

 

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center;
    }
}
</style>

 

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
NashMashPets
Excursionist
22 0 4

Masters Hub Thank You- Do You know a code to center the pricing also>?

 

718EBB90-7B5B-47D1-BEFD-0B0252B65D03.jpeg

NashMashPets.com
NashMashPets
Excursionist
22 0 4

( The Pricing AND the Tax + Shipping calculation text)

NashMashPets.com
MastersHub
Shopify Partner
215 20 38

Always. You're welcome. You can use this code.

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center;
    }

    .product-info__price .rating-with-text {
      justify-content: center;
    }

    .product-info__price {
      text-align: center;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
NashMashPets
Excursionist
22 0 4

i Have added the code. The tax and shipping calculation centered.....Although the Price did not center. 

NashMashPets.com
MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

Sorry little mistake. Try again 🙂

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
      justify-content: center!important;
    }

    .product-info__price {
      text-align: center!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
NashMashPets
Excursionist
22 0 4

Success! @ MastersHub

NashMashPets.com
NashMashPets
Excursionist
22 0 4

@MastersHub Thank You!!!

 

NashMashPets.com
MastersHub
Shopify Partner
215 20 38

Always. You're welcome. I'm glad you succeeded @NashMashPets 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
dreamtechzone_5
Shopify Partner
168 1 20

Hello MastersHub

I am using the Shopify dawn theme. I want to keep the size of the social icons in the footer section of my website the same. The size of the LinkedIn icon seems large to me. LinkedIn icon must be made smaller, as it is higher and wider than the others. Please help me. Thank you.

Store: https://dream-tech-zone.myshopify.com/

Password: Admin

Screenshot 2024-02-17 233131.png

MastersHub
Shopify Partner
215 20 38

The Linkedin icon looks a little big, but it's actually the same size. But if it still doesn't appeal to your eyes, use this code.

 

<style>
.icon.icon-linkedin {
    width: 2rem;
    height: 2rem;
}
</style>
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
NashMashPets
Excursionist
22 0 4

I am now trying to center the vendor name. i tried this code to center the vendor name.

<style> product.vendor {text-align: center;}</style>

It did not work.  Can this be solved?

@MastersHub 

 

NashMashPets.com
MastersHub
Shopify Partner
215 20 38

You can use this code

 

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
      justify-content: center!important;
    }

    .product-info__price {
      text-align: center!important;
    }
    
    .product-info__vendor {
        text-align: center!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
NashMashPets
Excursionist
22 0 4

THis code is working: although sometimes the center align for the price on product page still slides to the left of the screen on mobile. At other times it is centered. Is there a code to solidify this setting for centering to the middle?

NashMashPets.com
NashMashPets
Excursionist
22 0 4

@MastersHub 

NashMashPets.com
MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

Hi @NashMashPets, Maybe it could be of use to you.

 

<style>
@media screen and (max-width: 999px) {
    .product-info__title {
        text-align: center!important;
    }

    .product-info__price .rating-with-text {
        justify-content: center!important;
    }

    .product-info__price {
        text-align: center!important;
    }
    
    .product-info__vendor {
        text-align: center!important;
    }

    .product-info__price .rating {
        margin-inline-start: 0!important;
    }
}
</style>

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

Dan-From-Ryviu
Shopify Partner
7547 1455 1452

Hi @NashMashPets 

You can add this code to the very bottom of your theme.css file in Online Store > Themes > Edit code to align the product title to the center

.product-info__title.h1 { text-align: center; }

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Henry
Astronaut
984 282 227

Hi @NashMashPets 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){
.product-info__title {

    text-align: center !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

zaczee
Globetrotter
848 46 42

Hi,

 

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

 

@media screen and (max-width: 999px) {
  .product-info__title {text-align: center; }
}