CSS to wrap business name onto next line & To disable read more

Ask the Community Customization
1

I would like the css so I can adjust longer business names onto the next line?

Also, would like to display the full business description so if i could get css to disable the read more and instead show all?

Thank you,

3

Hi there, @Shawn_Martin :wave:

Could you please share a link to the page with the widget, where you’d like to apply these changes?

Also, please let me know the maximum number of symbols/words you’d like to display on the 1st line :pray:

4

Hey Man,

I’m thinking 26 characters including spaces.

The link to the directory i’m referring to. https://vrtz.cc/directory-cambridge-isanti-bradford-twp-grandy-stanchfield-mn

The location giving me some trouble is Gerhardson Mortgage Team @ Luminate Home Loans.

Thank you,

Shawn Martin
FanYourLocal

5

Hi @Shawn_Martin :wave:

  1. The thing is that with a font size of 16px, a single line can accommodate up to 26 characters, so any remaining part of the business name will automatically shift to the 2nd line. I’ve checked the location you mentioned and everything seems to be looking fine:

image
image333×267 30.8 KB
a

  1. To hide the Read More button and display the full description, please use this code in the Custom CSS field:
.es-text-shortener {
  display: block;
}

.es-text-shortener-control-open {
  display: none;
}

Check it out and let me know if it worked for you :wink:

6

Yes, the read more disabled works great. The location you shows image of doesn’t show that way. If it appeared the way you showed it, that would be perfect but unfortunately on mobile it doesn’t. Most of my traffic will be mobile. Any solution?

7

Got it! This CSS code should help:

[class*='location-preview__Title-sc'] {
  width: calc(1ch * 26)!important;
}

Test it out and let me know if it worked :slightly_smiling_face: