Help responsive text stay on one line, fill horizontal space and align vertically

Support
#1

Please see the URL in the secure note. I need

  1. the text in the blue bar “Compassion. Education. Transformation.” to align vertically in the blue bar (I can’t seem to find a way to do this via X theme in WP dashboard)
  2. the same text to stay on one line while it’s resizing for each platform
  3. the same text to fill the horizontal space allowed on each platform with a small buffer on left and right

I have tried using the responsive text short code, but have had trouble getting the right combination of all the various settings so that it does what I want.

I would also like the blue bar to be no more than 75 px high on the desktop screen, but need that height to be responsive as well. Is this doable?

I’m using Visual Composer.

#2

Hi There,

1 - Click on the ROW where your text is placed and turn off column container.

2- Seems like the responsive text is already working, so when you turn off column container ti should work.

3- You can add a bit of padding left and right to your column or row.

You can add the gap element above and below the text, the gap element has an option to be hidden based on screen width, so you can show it just on the desktop for example and hide on other devices.

Hope it helps

#3

Thanks! I will try this.

#4

Let us know how it goes.

Cheers!

#5
  1. Forgive my ignorance, but I’m not sure I know where to turn the column container off. I unchecked the “Inner Container” box under Content Band Settings. that didn’t seem to make any difference. I left it off. Note: In the VC X Integration tab, all the check boxes are marked except the Remove Frontend Editor (in case such a command might be hidden because of that).
  2. Text is responsive (has always been responsive), but is still moving to two lines.
  3. adding gaps has helped vertically align the text, but the blue bar behind the text is still much taller than I’d like. Is there a way to shrink that height and keep the height responsive?
#6

Hi there,

Unfortunately, the Responsive heading functionality is only working if you use the Cornerstone for your page correctly. The Visual Composer adds extra CSS code.

I suggest that you do that functionality by custom CSS coding. Please kindly add the code below to X > Launch > Options > CSS:

#x-content-band-4 h1 span strong {
    font-size: 5vw;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    height: 75px;
    margin-top: -1.5%;
}

@media (min-width: 1220px) {
 #x-content-band-4 h1 span strong {
    font-size: 65px;
 }   
}

Hope it helps.

#7

Thanks! I’ll try this.

#8

This seems to have helped a great deal. Only a few issues, I realize I may be asking too much of the system. Would it be better to turn the text into an image?

  1. I had to adjust the margin-top to -.9% to get the text to vertically align in the blue bar in safari in desktop. It is still vertically aligned on the tablet and mobile screens. However, in Chrome, the text on the desktop screen is too high. No idea what this looks like on a PC.

  2. Is there a way to get the blue bar height to get smaller on the tablet and mobile screens. Right now, I have it set to 75px high as default height is too tall.

#9

Hi There,

It is unusual to use an image for a headline. Not only that, the image that you’ve use has an empty space at the bottom of it. Try cropping that image properly.

But what I suggest is to use an standard Headline element instead, and apply a Responsive Text shortcode to it, play with the compression, min_size, and max_size until you get the desired look. If you did not get the desired look the first time you use the responsive text shortcode, then you’re not experimenting enough. What you need is a responsive text/headline and that is Responsive Text shortcode/settings is for.

Regarding the blue content band’s height, you can add a max-height: 75px; to its style field.

Hope it helps,
Cheers!