[Resolved] CSS for styling lists interferes with Gutenberg social icon block

Home Forums Support [Resolved] CSS for styling lists interferes with Gutenberg social icon block

Home Forums Support CSS for styling lists interferes with Gutenberg social icon block

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1622041
    Neil

    Hi,
    I’ve run into a problem with a CSS snippet (which I think I found somewhere on this forum) messing up the styling of the social icon block of the Gutenberg editor (see private information).

    Is it possible to exclude the block from the custom formatting so that it shows its default formatting? The CSS is:

    /* list styling */
    
    @media (max-width: 768px) {
    .entry-content ul, .entry-content  ol {
        margin-left: 1em;
    }
    }
    
    .entry-content ul li, .entry-content ol li {
        margin-bottom: 10px;
    }
    
    ol {margin-bottom: 15px;}
    
    /* styling of nested lists */
    
    .entry-content ul :first-child, .entry-content ol :first-child {
        margin-top: 10px;
    }
    

    It’s the first part (“list styling”) that’s causing the problem, rather than the second part (“styling of nested lists”).

    Any help would be greatly appreciated!

    #1622429
    David
    Staff
    Customer Support

    Hi there,

    you would have to exclude the social icons class from your CSS.

    so wherever this selector is used ( in full or part ):

    .entry-content ul

    you can change to:

    .entry-content ul:not(.wp-block-social-links)

    #1622449
    Neil

    Thank you so much – that worked!

    #1622514
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.