Jump to content

How to stop word wrap ?

Recommended Posts

Site URL: https://bamboo-lime-face.squarespace.com/

Hi all! 

I have two issues, one of which might solve the other!

 

1: I am trying to stop the Available / Unavailable words on my website from wrapping onto two lines on different screens.

this is what it looks like on a laptop full screen (which I like)

image.thumb.png.682798b92d64ffbdc779bafdd32f0a2e.png

As you can see, when the screen is smaller - i.e. when I have the Custom CSS section open on my computer -  the words wrap onto two lines

 

image.thumb.png.fb40a3c188e98824d2d3c3ef263c7073.png

 

how do i stop the words from wrapping onto two lines?

2:  which might be a workaround for the first, is to make the text sit to the right of the image block - rather than below. I would like to do this for mobile view as well - is this possible?

The image block is a "CARD" design, so the text should actually be sitting to the right of the image anyway... im not sure why it isnt! 

image.thumb.png.0428fade60bf605cb6173c2fdf0b107a.png

 

Thanks in advance!

Link to comment
On 1/7/2021 at 8:56 AM, Hannah_Kim said:

@hlzcp hi, I'm coming across the same problem. can you share the solution that Tuan emailed you please? thank you so much in advance!

If you share site url, we can give the exact code for your site. Each case will need different code.

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
  • 3 months later...

I'm having the same issue.  I don't want the text to wrap on Mobile, because it breaks words in half. 

https://changeup.com/

Any code I could use in my custom CSS?  I think I just don't want words to break apart or punctuation to break apart (i.e., be put on the next line, like a hanging comma).

Thanks for your help!

James

Link to comment
On 5/5/2021 at 9:46 PM, jamesvgarrett said:

I'm having the same issue.  I don't want the text to wrap on Mobile, because it breaks words in half. 

https://changeup.com/

Any code I could use in my custom CSS?  I think I just don't want words to break apart or punctuation to break apart (i.e., be put on the next line, like a hanging comma).

Thanks for your help!

James

You mean chaneup works text? Add to Design > Custom CSS

/* prevent text wrap mobile */
@media screen and (max-width:767px) {
div#block-70013f55ef91ab95ea7a h1 {
    white-space: nowrap !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
  • 11 months later...
On 4/21/2022 at 2:15 AM, Coco1234 said:

I'm having the same issue, it's fine on mobile but it's only when viewed in a smaller window on desktop/etc. Any specific code to assist with this? 

https://www.comercompanies.com/portfolio

Screen Shot 2022-04-20 at 1.36.21 PM.png

Which screen size do you see problem?

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
  • 8 months later...
On 1/12/2023 at 1:24 AM, brittanystatt said:

I am having the same issue, but not just mobile. Is there a code to prevent all word breaks completely across the site, desktop and tablet too?

/* prevent text wrap mobile */
@media screen and (max-width:767px) {
div#block-70013f55ef91ab95ea7a h1 {
    white-space: nowrap !important;
}
}

Use this

/* prevent text wrap mobile */
* {
    white-space: nowrap !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.