Jump to content

Centre custom product title on mobile only

Recommended Posts

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;
}
}

Screen Shot 2022-03-23 at 7.33.21 pm.png

Link to comment
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;
}
}

Screen Shot 2022-03-23 at 7.33.21 pm.png

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;
  }
}

Please give this a 👍 if it helps

Link to comment
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! 

Link to comment
  • 5 months later...
On 9/7/2022 at 4:29 AM, Rjafadi said:

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

Screenshot 2022-09-06 at 22.14.48.png

Use this CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Screenshot 2022-09-08 at 20.51.34.png

Try this CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
22 hours ago, Rjafadi said:

Thank you @tuanphan

is there I could centre the price?

4F9A25BC-8ABB-421F-82EC-CEBA60CDBA94.png

Try this

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.