Mobile elementor text issue

Hi There,

I seem to be having a small problem with the mobile text on an elementor section (this relates to this page: https://luxestudio.co.za/studio/ ). I know how (thanks to Roman who shared this link with me: https://docs.elementor.com/article/68-mobile-editing how to make text bigger on mobile). But I seem to have a problem with this particular heading:

Elementor  Studio 2020-03-21 16-41-47

which won’t allow me to edit the heading without it going on numerous lines.

Is there any advice you can provide? Many thanks

Best,
Mel

Hello there,

Firstly you would add a custom CSS class name to your widget, which the option is located in the Advanced settings panel. Refer to this documentation.

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 600px) {
      .your-class-name .elementor-widget-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .your-class-name .elementor-widget-container h2.elementor-heading-title {
        font-size: 30px !important;
      }
      
    }

Replace your-class-name in the code above with your widget’s custom CSS class.

Regards,
Kharis
aThemes Support

Hi Kharis,

This is sorted! Thank you ever so much I just learnt something new so great :slight_smile:

Best,
Mel

1 Like

You’re welcome Mel!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support