[Resolved] Margin/padding for ol, ul on mobile

Home Forums Support [Resolved] Margin/padding for ol, ul on mobile

Home Forums Support Margin/padding for ol, ul on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2393094
    Gregg

    I am trying to get the ol, ul margin values I set for PC/Tablet to also show on Mobile.

    The values I have below work fine on PC and Tablet:
    ol, ul {
    margin: 0 0 2em 1.5em;
    }

    But on mobile those settings get overwritten to the default:
    ol, ul {
    margin: 0 0 1.5em 3em;
    }

    From searching your forum I know it has something to do with adding @media(min-width: 769px) or @media (max-width: 768px) and I tried different variations – but just can’t figure it out.

    I cleared cache and that sort of thing.

    Thanks in advance.

    #2393111
    David
    Staff
    Customer Support

    Hi there,

    couple of things:

    1. you want to move that CSS outside of the @media query.
    2. you have some broken CSS

    See this block of CSS:

    
    @media (min-width: 769px) {
        .nav-align-center .inside-navigation {
            max-width: 1200px;
            margin:auto
        }
    
        ol, ul {
            margin:0 0 2em 1.5em
        }
    
        ul ul {
            list-style-type:circle !important
        }
    
        @media (min-width: 769px) {
            .nav-align-center .inside-navigation {
                max-width: 1200px;
                margin:auto
            }
    
            .main-nav {
                flex:1
            }
    
            .main-navigation li:first-child, .main-navigation li:last-child {
                margin-left:auto
            }
    
            .main-navigation li:last-child {
                min-width: 173px;
            }
        }
    

    Replace it with:

    
    ol,
    ul {
        margin: 0 0 2em 1.5em
    }
    
    @media (min-width: 769px) {
        .nav-align-center .inside-navigation {
            max-width: 1200px;
            margin: auto
        }
    
        ul ul {
            list-style-type: circle !important
        }
    
        .nav-align-center .inside-navigation {
            max-width: 1200px;
            margin: auto
        }
    
        .main-nav {
            flex: 1
        }
    
        .main-navigation li:first-child,
        .main-navigation li:last-child {
            margin-left: auto
        }
    
        .main-navigation li:last-child {
            min-width: 173px;
        }
    }
    #2393453
    Gregg

    Ok, I replaced the css but still didn’t work. Just to try – I got rid of this css I had:

    .yoast-table-of-contents ul ul {
    list-style-type: circle !important;
    color: #888888
    }

    .yoast-table-of-contents ul {
    list-style-type: square !important;
    color: #888888
    }

    And that fixed my issue (not really sure why) – so we can close this issue out.

    Serves me right for playing around with css when I don’t know what I’m doing, lol.

    Thanks for the help, as always the support was great!

    #2393765
    David
    Staff
    Customer Support

    Glad to hear you got it working 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.