Text block alignment - Mobile version

Does anyone know how I can align my text differently on the mobile interface without reflecting on the desktop version? 

I'm having some trouble structuring some text blocks on desktop and making sure they also look nice on mobile. Given the screen dimensions and vertical orientation, I would like to align my text blocks in the centre vs to left (desktop) when editing mobile. 

Every time I change the text alignment on mobile it reflects on the desktop version as well.

Thank you so much!

@tci_ca  Absolutely! You can add some CSS to make this change for all fonts or one block of text. 

To add the below CSS:

• Click on 'Website'
• Scroll to the bottom and click 'Website Tools'
• Then 'Custom CSS'

// Change alignment for all h2 text on mobile

@media screen and (max-width:640px) {h2{
  text-align: center}}

You can swap out h2 for a different font size:

• h1
• h3
• h4
• p.sqsrte-large (p1)
• p (all paragraph fonts)
• p:not(.sqsrte-large):not(.sqsrte-small) (p2)
• p.sqsrte-small (p3)

If you want to target only one specific block of text, you will need to find the block id for the text block. To do this:

• Install the Chrome Squarespace ID Finder extension
• Go to the page you want to modify and select the extension
• Find the block id for the text box you want to modify and click on it (it will copy it for you)
• The insert that into the code, as shown below, before the font you want to modify

@media screen and (max-width:640px) {#block-123456789 h2{
text-align: center
} }

If this screenshot, you can see that there is a white box with #block-##### above a header. If I was to use that specific number in my code, it would change the h2 font only in that text box. The one over the image would be used to target that element.

If something doesn't modify, try adding !important

@media screen and (max-width:640px) {#block-id123456789 h2{
text-align: center !important
} }

I think p2 should be p:not(.sqsrte-large):not(.sqsrte-small)

Sometimes use p only will affect on both p1 & p3

@tuanphan Edited to add that! For some reason, it wasn't working on my site earlier so I omitted it but I should've still marked it as p1 - p3. Thank you!