[Support request] Margin/padding for ol, ul on mobile

[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.

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[David]

Glad to hear you got it working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts