How can I disable the default margin and padding for the `ul` tag?

This topic has 11 replies, 5 voices, and was last updated 1 month, 1 week ago ago by Tony Rodriguez

  • Avatar: st7878
    st7878
    Participant
    April 24, 2026 at 12:36

    Could you please advise how to remove the default margin and padding from a ul element? Because of them, the bullet points extend beyond the edges of the screen.

    Files is visible for topic creator and
    support staff only.
    10 Answers
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    April 24, 2026 at 15:33

    Hello, st7878,

    Unfortunately, it cannot be removed; however, it can be modified, for example, by using the following code:

    ul {  
      margin: 0;  
      padding: 0;  
    }  

    Best regards,
    The 8Theme Team

    Avatar: st7878
    st7878
    Participant
    April 29, 2026 at 10:19

    You have misunderstood. I need to remove the margin: 0 and padding: 0 from your styles. Currently, the list bullets are overflowing off the edges of the screen; I need them to display properly.

    Files is visible for topic creator and
    support staff only.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 29, 2026 at 10:41

    Hello @st7878,

    We apologize for the misunderstanding regarding your request. Could you please try one of the following custom CSS snippets:

    .elementor-location-single ol, .elementor-location-single ul {  
        list-style-position: inside;  
    }

    or

    .elementor-location-single ol, .elementor-location-single ul {  
        padding-inline-start: 20px;  
    }

    Please add one of these suggested snippets in your Theme Options -> Theme Custom CSS -> Global CSS.

    Custom CSS documentation: https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: st7878
    st7878
    Participant
    April 29, 2026 at 10:52

    Both options do not solve the problem. (((

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 29, 2026 at 10:59

    Hello @st7878,

    Please provide the URL of the page you would like us to review, as the custom solution we provided should function correctly. You may also share temporary wp-admin access in the private content section so that we can implement it directly on your website.

    Examples:
    https://gyazo.com/497d51fb5153b34f2d959941f5d27e23
    https://gyazo.com/2143e82dafeab62f2198a6edaf6fbe78
    You need also to remove the custom CSS you previously added -> https://gyazo.com/c7d8f93c46ae032aef540cd52f5a7ba3

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: st7878
    st7878
    Participant
    April 29, 2026 at 11:34

    I removed my style and added yours. Yes, it works on the post/page: https://voyah.com.ua/who-will-the-voyah-electric-cars-suit-for-me/ but it doesn’t work on the site’s pages: https://voyah.com.ua/voyah-free/ (scroll to the very bottom of the page to the SEO text).

    Avatar: Ayan Rahman
    Ayan Rahman
    Support staff
    April 29, 2026 at 11:54

    Hi,

    Could you please provide a few additional screenshots so that we can better understand exactly which content you are referring to?

    Best regards,
    8Theme’s Team

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 29, 2026 at 12:34

    Hello @st7878,

    If you need to apply this modification globally across your pages, you can use the following snippet in your Theme Options -> Theme Custom CSS:

    [data-elementor-type=wp-page] ol,  
    [data-elementor-type=wp-page] ul {  
        list-style-position: inside;  
    }

    or

    [data-elementor-type=wp-page] ol, [data-elementor-type=wp-page] ul {  
        padding-inline-start: 20px;  
    }

    However, we recommend using custom widget-based CSS only in the specific areas where such improvements are required. For example, in your text widget, you can add the following custom CSS under “Advanced (tab) → Custom CSS”:

    selector ol, selector ul {  
        list-style-position: inside;  
    }

    or

    selector ol, selector ul {  
        padding-inline-start: 20px;  
    }

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: st7878
    st7878
    Participant
    April 29, 2026 at 12:37

    Thanks for the support! My topic “How can I disable the default margin and padding for the `ul` tag?” has been successfully resolved.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    April 29, 2026 at 12:37

    Dear st7878,

    It’s great having you in our WordPress & WooCommerce community!

    Every insight you share helps us refine XStore and build tools that empower thousands of online store owners worldwide.

    Together, we grow stronger with every release.

    Topic closed.
    The 8Theme Team

  • Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘How can I disable the default margin and padding for the `ul` tag?’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.