Responsive width classic text box

[whitelobster11]

How can I make the classic text box containing the address below the logo at the top of the page adjust font size and letter spacing to be responsive to device width?

Welcome - Mother Culture

note* I removed the text box until I had this information on how to fix it because I did not want to leave it live on the site in a half finished state-that said hopefully you can tell me how to make the contents of a classic text element responsive- also with the new text element, is there a way to make the text show in the cornerstone preview or does that only work with classic text elements?

[ruenel]

Hello There,

Thanks for writing in! It seems that you are using this css to display the address:

.masthead-stacked .x-brand:after {
    content: "1819 3RD AVENUE LOS ANGELES CA 90019";
    display: block;
    font-size: 0.5em;
    letter-spacing: 11px;
    font-family: 'Eb Garamond', cursive;
}

To adjust the font size in different screen size, you can add this css code as well

@media(max-width: 979px){
   .masthead-stacked .x-brand:after {
     font-size: 22px;
   }
}

@media(max-width: 480px){
   .masthead-stacked .x-brand:after {
     font-size: 22px;
   }
}

Hope this helps.

[whitelobster11]

Hey thank you for this

Sorry for the misunderstanding but I want to be able to do everything you just said BUT not in the header of the subpages- but for a classic text box that I want to add under the logo on the main welcome page

I HAVE NOT YET ADDED THIS TEXT BOX AS I DO NOT WANT TO POST IT UNTIL I CAN FORMAT IT PROPERLY

How can I make the text inside of a classic text box responsive?

[whitelobster11]

update- I have added the text box that contains the address to the following page

Welcome - Mother Culture

I managed to get the responsive text working somewhat but it is still a little goofy- when viewed on desktop it looks great when the window is wide but the second you make the window a little skinnier the text gets bumped to be 2 lines tall

how can I set this up to be fluidly responsive so that the text shrinks to fill the full width of the black bar at a single line height no matter the width of the window?

[rad]

Hi there,

Please add a class name to your classic text element’s Class input. Let’s say you added responsive_text_1, then add this CSS

.responsive_text_1, .responsive_text_1 span {
    font-size: calc(1px + 1vw) !important;
    letter-spacing: calc(1px + 1.5vw) !important;
}

The issue is, that text is too long and it will always break to two lines. Even a responsive text shortcode can’t fix it due to minimum font size.

Thanks!