Jump to content

Blog post text cutting to two lines

Go to solution Solved by tuanphan,

Recommended Posts

So I've tried everything I can find, squarespace support is completely hands off even going as far as to tell me that my problem is expected behavior. But I cant get my blog post headlines to stop wrapping to the next line mid word. I know it uses dynamic scaling and I can live with that but it needs to stop cutting words in half depending on what size your screen or window is. I'm exhausted, I'm defeated I don't get a lot of time to work on my website and this is a huge roadblock for me. Its one of a couple but at this moment its the biggest. Its hugely embarrassing and I just need some help. 

Thank you in advance for your time. 

This screenshot is taken with an iPhone 14 Pro Max, one of the most popular phones in the world. Its 2023, surely this can be fixed.

image.thumb.jpeg.cfa2c2fa6ec74ce22eeee6f7837e635f.jpeg

Edited by refused91510
Link to comment
  • Replies 9
  • Views 528
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, tuanphan said:

Can you share link to this post? We can help easier

I apologize, it asked for a link when I posted so I figured it shared. The example I used is here: https://www.theindiecurators.com/the-games/1mww30jrxwnqwnyib694k2d7pr8tq2

 

It happens on all the blog posts in the link below. Mostly on mobile bit it will do it on desktop too if the window is not wide enough. 

https://www.theindiecurators.com/the-games

Link to comment
On 6/15/2023 at 4:25 PM, refused91510 said:

I apologize, it asked for a link when I posted so I figured it shared. The example I used is here: https://www.theindiecurators.com/the-games/1mww30jrxwnqwnyib694k2d7pr8tq2

 

It happens on all the blog posts in the link below. Mostly on mobile bit it will do it on desktop too if the window is not wide enough. 

https://www.theindiecurators.com/the-games

You can add this to Design > Custom CSS

/* blog title mobile */
@media screen and (max-width:767px) {
.blog-item-title h1 {
    font-size: 30px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/18/2023 at 11:45 PM, tuanphan said:

You can add this to Design > Custom CSS

/* blog title mobile */
@media screen and (max-width:767px) {
.blog-item-title h1 {
    font-size: 30px !important;
}
}

 

I've been trying to get it to work but no luck. Also the code I was using to hide tags isn't working either.  Thank you for all your help thus far, I appreciate it. 

Link to comment
21 hours ago, refused91510 said:

I've been trying to get it to work but no luck. Also the code I was using to hide tags isn't working either.  Thank you for all your help thus far, I appreciate it. 

You have a syntax error in CSS box. If you look at right bottom corner, you will see a red notice.

Can you send all current code? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/27/2023 at 12:49 AM, tuanphan said:

You have a syntax error in CSS box. If you look at right bottom corner, you will see a red notice.

Can you send all current code? We can check easier

Ok So that helped me with the tags, I was somehow missing a "}" That helps a lot thank you.  So tags fixed but I'm still unable to get the blog header from wrapping words. 

Link to comment
2 hours ago, refused91510 said:

Ok So that helped me with the tags, I was somehow missing a "}" That helps a lot thank you.  So tags fixed but I'm still unable to get the blog header from wrapping words. 

It worked to me. You try checking it again

image.png.03c8a2b9f653d7926742e3e2acf54531.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
5 hours ago, refused91510 said:

Ok it appears to have worked on mobile!!! That's my number one concern fixed thank you so much! Its still taking place on desktop. I wish I understood why.

 

image.thumb.png.2d29ff9b95510df32a152c41d675b670.png

You can reduce Blog Title size (h1) to prevent this. Or add this to Design > Custom CSS

@media screen and (min-width:768px) {
/* blog title mobile */
.blog-item-title h1 {
    font-size: 40px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.