Centre custom product title on mobile only

Site URL: https://littlewhimsey.com

Hi there, 

I'm trying to centre my product title on mobile only.  I've found this code but didn't work  (my site os 7.0) I've included a screen shot for reference. Is there an easy css code for this? Many thanks in advance 🙂

/* align shop title */
@media screen and (max-width:640px) {
h3.nested-category-title {
    text-align: center !important;
}
}

2 hours ago, ARees said:

Site URL: https://littlewhimsey.com

Hi there, 

I'm trying to centre my product title on mobile only.  I've found this code but didn't work  (my site os 7.0) I've included a screen shot for reference. Is there an easy css code for this? Many thanks in advance 🙂

/* align shop title */
@media screen and (max-width:640px) {
h3.nested-category-title {
    text-align: center !important;
}
}

Hi, add this code to custom css (Design > Custom CSS) and let me know how it goes 🙂 

@media screen and (max-width:646px) {
  h1.ProductItem-details-title {
    text-align:center !important;
  }
}

16 hours ago, Jia said:

Hi, add this code to custom css (Design > Custom CSS) and let me know how it goes 🙂 

@media screen and (max-width:646px) {
  h1.ProductItem-details-title {
    text-align:center !important;
  }
}

You are a legend! perfect! THANK YOU again, Jia! 

Hi @Jia is there a way to center the production description with your code? 

On 9/7/2022 at 4:29 AM, Rjafadi said:

Hi @Jia is there a way to center the production description with your code? 

Use this CSS

/* center product description */
@media screen and (max-width:767px) {
.ProductItem-details-excerpt {
    text-align: center;
}
}

Thank you! @tuanphan

Is there a way to create some space between the product title and images above? Also if the price could be under the title and centered too.

13 hours ago, Rjafadi said:

Thank you! @tuanphan

Is there a way to create some space between the product title and images above? Also if the price could be under the title and centered too.

Try this CSS

/* center product description */
@media screen and (max-width:767px) {
.ProductItem-details-excerpt {
    text-align: center;
	margin-top: 30px;
}
}

Thank you @tuanphan

is there I could centre the price?

22 hours ago, Rjafadi said:

Thank you @tuanphan

is there I could centre the price?

Try this

@media screen and (max-width:767px) {
	body.view-item .product-price {
		text-align: center !important;
}
}