Align text to centre for ONE page only

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!

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!

Ah, thank you, Ziggy! That worked! Can you please explain why we'd have to use the following code?

.sqsrte-large, .sqsrte-small

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.

Ah okay! Thank you!

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

Yeah, that's what I was trying to do with p1 etc. but didn't work. 🫣

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

Thank you @tuanphan! That worked!