Jump to content

Help to customize blog title in web and mobile version

Go to solution Solved by E-W,

Recommended Posts

I add the code below to customize text in the blog post. The desktop version works well, but the mobile looks bad. The space between the text is too big. How can I fixed the mobile version without affect the desktop version?

/* Blog title*/
h1.blog-title a {
    font-size: 25px;
  line-height: 30px;
    font-weight: 500 !important;
}

thanks! 
image.thumb.png.7476cc3047d70d4fbc9965fa889740da.pngimage.thumb.png.453298eedb1d8c1a7a96ac92af025da1.png

Link to comment
  • Solution
25 minutes ago, rociolopez said:

I add the code below to customize text in the blog post. The desktop version works well, but the mobile looks bad. The space between the text is too big. How can I fixed the mobile version without affect the desktop version?

/* Blog title*/
h1.blog-title a {
    font-size: 25px;
  line-height: 30px;
    font-weight: 500 !important;
}

thanks! 
image.thumb.png.7476cc3047d70d4fbc9965fa889740da.pngimage.thumb.png.453298eedb1d8c1a7a96ac92af025da1.png

You can use this code to only change mobile:

@media only screen and (max-width: 600px) {
  body {
    line-height: ;
  
}

}

BUT, if you use rem instead of px the line height will be responsive to the device. 

Edited by E-W
Link to comment
8 hours ago, E-W said:

BUT, if you use rem instead of px the line height will be responsive to the device. 

I agree, setting the line height to 1.2em instead of 30px will keep the line height responsive to the text size changes on mobile.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral 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.