Jump to content

Align text to centre for ONE page only

Go to solution Solved by tuanphan,

Recommended Posts

Hey everyone!

I am trying to align the text for one of the pages to the centre on mobile only using the page collection ID but it isn't working correctly it also targets other pages like the blog posts, so I'm not sure why.

@media screen and (max-width: 767px) {
#collection-64cffc9994e65d76b69494af 
  h1, h2, h3, h4, p { 
   text-align: center !important;
}}

Many thanks!

Link to comment

Your code is very slightly wrong, try this correction:

@media screen and (max-width: 767px) {
  #collection-64cffc9994e65d76b69494af {
    h1, h2, h3, h4, p, .sqsrte-large, .sqsrte-small { 
      text-align: center !important;
    }
  }
}

Let me know if that works for you!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, theuq said:

Can you please explain why we'd have to use the following code?

.sqsrte-large, .sqsrte-small

This is targeting the Paragraph 1 and Paragraph 3 font sizes.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

p1 p2 p3 for the paragraphs would be easier to understand (and remember when coding!) Oh well!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 3 weeks later...

@Ziggy Sorry to bother you about it but I noticed that the text in the footer also comes center-aligned for that one page. Is there any way we can keep the highlighted text left-aligned? I've tried the below code and a few iterations but that didn't work.

@media screen and (max-width: 767px) { section[data-section-id="64cfffb4aae68f02a5739844"] { 
      text-align: left !important;
}
}



image.thumb.png.7b1f1f38d28148c743235c5b780d3dc5.png

Link to comment
  • Solution

You can adjust Ziggy code to this, to exclude Footer content from the code

@media screen and (max-width: 767px) {
  #collection-64cffc9994e65d76b69494af article {
    h1, h2, h3, h4, p, .sqsrte-large, .sqsrte-small { 
      text-align: center !important;
    }
  }
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.