How to hide classic text

[oscarbnihrane]

Hello,

I’d like to hide the huge text on mobile view, while then showing the small text. How do I hide the big classic text without hiding both the big and small text?

Thanks in advance!

Also:

When in mobile, I’d like the width of this paragraph to be more narrow. How do I edit the classic text width so it looks more professional on mobile?

Thanks in advance for the answer to both questions!

[tristup]

Hi Oscar,

Thanks for reaching out.
To hide the Classic Text element you need to add the specific class and add the custom CSS code into the Theme Options > CSS by using that specific class as selector.

@media(max-width: 480px) 
{
    .x-classic-text-hide 
    {    
        display: none;
    }
}

The above code is a sample code that helps a specific class x-classic-text-hide to be hidden in specific screen size. There are a few predefined classes that can be used as listed below, which helps you to hide the element in specific screen sizes.

x-hide-lg 
x-hide-md 
x-hide-sm 
x-hide-xl 
x-hide-xs

But I would suggest you use the Text element instead of the Classic Text element and control the width by clicking into the Width option to get an option to specify all screen size widths as shown in the given screenshot.

So the Text element width will be adjusted as per the given values for the specific screen sizes. And you can use the Hide During the Breakpoint option to hide the Text element in a specific screen size too.

Hope it helps.
Thanks

[oscarbnihrane]

Hello,

Thanks for your reply. Can I adjust the width and the hiding of the text only in the text box and not in the classic text box?

[tristup]

Hi Oscar,

The options are not available for the Classic Elements.

Thanks