Prevent Text Block from Wrapping on Mobile

Site URL: http://www.takebackyourcareerpodcast.com

Hi there,

I am wondering if there is a way to prevent a text block from wrapping. For example I have a title that is one line on desktop but then turns to two lines on mobile. Ideally the two text blocks would shrink to the screen width instead of wrapping. Is this possible?

I am using 7.1.

Thank you

What is your site password 

2 minutes ago, bangank36 said:

What is your site password 

boots135

🙂

@media only screen and (max-width: 500px) {
  #block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content h3 {
  font-size: 7vw
}
#block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content p {
  font-size: 4vw
}
}

12 hours ago, bangank36 said:

@media only screen and (max-width: 500px) {
  #block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content h3 {
  font-size: 7vw
}
#block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content p {
  font-size: 4vw
}
}

That worked perfectly; thank you so much, Bangank!

How can I make the text wrapping issue go away from my site? I have it on many pages, but specifically referring to this page right now- when the window changes, the text moves from one line to two and pushes the images out of line with each other. 

On mobile, I have a different issue, because this one person's name (we're getting a new image soon, it's supposed to have that weird shape at the moment so don't worry about that) stays on one line weirdly, but isn't centered. 

Site is www.adeptbenefits.com and password is Employee180!

On 3/3/2022 at 6:05 AM, dv_louise_designs said:

How can I make the text wrapping issue go away from my site? I have it on many pages, but specifically referring to this page right now- when the window changes, the text moves from one line to two and pushes the images out of line with each other. 

On mobile, I have a different issue, because this one person's name (we're getting a new image soon, it's supposed to have that weird shape at the moment so don't worry about that) stays on one line weirdly, but isn't centered. 

Site is www.adeptbenefits.com and password is Employee180!

Which page are you referring to?

On 3/6/2022 at 12:08 AM, tuanphan said:

Which page are you referring to?

All of them really, but specifically the one above is the Meet Our Team page. Also, is there a way to keep the aspect ratio constraints from changing for photos?

On 3/9/2022 at 10:30 AM, dv_louise_designs said:

All of them really, but specifically the one above is the Meet Our Team page. Also, is there a way to keep the aspect ratio constraints from changing for photos?

 

You mean this problem?

Add to Design > Custom CSS

/* Team page mobile */
@media screen and (max-width:767px) {
section[data-section-id="6215672720d4727b3982a809"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.user-items-list-item-container[data-section-id="6215672720d4727b3982a809"] {
.list-item-content {
    width: 100% !important;
}
.list-item-content__title {
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
}
.list-item-content__description p {
    text-align: center !important;
}
.list-item-content__description {
    width: auto !important;
    overflow: visible !important;
}}}

@tuanphanThat worked perfectly, thank you so so much!

Hello, I'm having the same issue at kgvirtualcfo.com

Try this code,

@media only screen and (max-width: 500px) {
  #block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content h3 {
  font-size: 7vw
}
#block-yui_3_17_2_2_1604274253628_10153 .sqs-block-content p {
  font-size: 4vw
}

Hello! I am having the same trouble on my site, www.elizabethlovestoorganize.com. On the home page, the bulleted items listed under areas I can help with. On the preview for ss it shows correctly, but when I view the site on my phone it wraps the text incorrectly. 

Thank you!

On 5/1/2024 at 7:16 AM, Belizabeth said:

Hello! I am having the same trouble on my site, www.elizabethlovestoorganize.com. On the home page, the bulleted items listed under areas I can help with. On the preview for ss it shows correctly, but when I view the site on my phone it wraps the text incorrectly. 

Thank you!

Can you take a screenshot of problem on your phone?

https://www.elizabethlovestoorganize.com/

Or you mean fix this text?

Hi! Yes, I mean fix the text you showed. It's even worse on my phone's views. 

On 5/6/2024 at 7:12 AM, Belizabeth said:

Hi! Yes, I mean fix the text you showed. It's even worse on my phone's views. 

Did you solve? It looks fine to me now.

Because the site is live, I did a temporary fix by removing the bullet lists and manually adding hyphens before each word. However, I do not like that I can't add a space after each word. Does it need to be bulleted for code to fix it? Thank you again!

On 5/11/2024 at 1:12 AM, Belizabeth said:

Because the site is live, I did a temporary fix by removing the bullet lists and manually adding hyphens before each word. However, I do not like that I can't add a space after each word. Does it need to be bulleted for code to fix it? Thank you again!

I think it needs code, because List have a left padding in default (this is default on all platforms), we need to remove it with code.

Okay I've changed it back. 🙂

To reduce left padding on mobile, you can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div.html-block ul {
    padding: 10px !important;
}
}