Archived topic

Margin/padding for ol, ul on mobile

3 replies · Started by Gregg on October 29, 2022

Viewing posts 1–4 of 4

October 29, 2022 at 8:29 am #2393094

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.

October 29, 2022 at 8:38 am #2393111

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

October 29, 2022 at 5:31 pm #2393453

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!

October 30, 2022 at 5:25 am #2393765

Glad to hear you got it working :)

This archived topic is closed to new replies.

Start building better websites today.