Custom CSS textarea too small

Hello,

The custom CSS textarea of WordPress is too small, very small

How could we change it to get a proper space to edit CSS ?

Also when I do Ctrl+F in Chrome to open search, it doesn't search into this CSS field …

  • Sajid
    • DEV MAN’s Sidekick

    Hello Jean,

    Hope you are doing good today :slight_smile:

    I can understand the issue but this is standard design of customizer view. I personally think this area width should be adjustable by drag and drop.

    Any way, right now you can enlarge this section by following the steps below.

    1. Install Styler extension of Google Chrome browser.

    2. Now go to Customizer window and open styler extension panel.

    3. Add the following CSS code in it (feel free to adjust the numbers according to your requirements):

    .customize-section-description-container + #customize-control-custom_css:last-child {
    width: 599px;
    }
    .wp-full-overlay-sidebar{
    width: 600px;
    }

    .wp-full-overlay.expanded {
    margin-left: 600px;
    }

    .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
    margin-left: -600px;
    }

    See this screenshot:

    Please note that this is site specific so you have to do it for other WordPress sites too.

    If you need it to be there already, then you can submit the idea here:

    https://wordpress.org/ideas/

    Feel free to post the idea link here and I would love to upvote.

    Also when I do Ctrl+F in Chrome to open search, it doesn't search into this CSS field …

    I kind of, can not see this issue on my end. When I search, it does highlight the common words in both views as you can see in the screenshot:

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,

    Sajid – WPMU DEV Support

  • Sajid
    • DEV MAN’s Sidekick

    Hello Jean :slight_smile:

    In my case, the height was auto and I did not do any thing to increase the height. On your site, try adding !important specificity and then check if it makes any difference.

    If no then please post the CSS code you added in styler and enable support staff access so I could take a closer look.

    To grant access go to Dashboard -> WPMU DEV -> Support -> Support Access -> Grant Support Access or see this manual for more details regarding how to enable support staff access.

    Best Regards,

    Sajid – WPMU DEV Support

  • Jean
    • The Crimson Coder
    /* this one was missing */
    .CodeMirror { height: auto; }

    .customize-section-description-container + #customize-control-custom_css:last-child {
    width: 599px;
    }
    .wp-full-overlay-sidebar{
    width: 600px;
    }
    .wp-full-overlay.expanded {
    margin-left: 600px;
    }
    .wp-full-overlay.collapsed .wp-full-overlay-sidebar {
    margin-left: -600px;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.