Jump to content

Alignment of text block on mobile

Recommended Posts

I'm running into an issue where I can't seem to change the alignment of text on mobile without interfering with the desktop version. 

For the mobile version, I would like text to be centred instead of aligned to the left as it feels more natural for the screen size. 

On this site for example, https://thecenterforimplementation.com/core-competencies-event under the "New resources on core competencies" I have the first item "White paper" as centred on mobile and it automatically changed on the desktop version ー hence the weird formatting. 

Does anyone know how I can not have the alignment to be synchronous for both desktop and mobile? 

Thank you so much. 

Link to comment

You can use CSS and a media query to center the text on mobile.

Left align the text in the text settings, then add this to Custom CSS:

@media only screen and (max-width:767px) {
  #block-46f9a3919c72c906dc3f {
    text-align:center;
  }
}

This just targets "New resources on core competencies"

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 1 month later...
On 4/18/2024 at 10:13 AM, Ziggy said:

You can use CSS and a media query to center the text on mobile.

Left align the text in the text settings, then add this to Custom CSS:

@media only screen and (max-width:767px) {
  #block-46f9a3919c72c906dc3f {
    text-align:center;
  }
}

This just targets "New resources on core competencies"

Hello, firstly thanks for this, second, how can I get the block code so it applies to them? thanks

Link to comment
11 hours ago, JeroniLab said:

Hello, firstly thanks for this, second, how can I get the block code so it applies to them? thanks

Here's a guide for you to get IDs on your website:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.