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
}