Jump to content

Text block alignment - Mobile version

Recommended Posts

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!

 

Link to comment

@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.

Screenshot2023-08-29at2_31_29PM.thumb.png.90a3d0e6647988447905e29b737e8ce4.png

If something doesn't modify, try adding !important

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

Edited by WCS

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment

@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!

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

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.