Trouble setting smaller fonts, spacing in bulled lists for mobile users in CSS

  • Unknown's avatar
    paulussmit · Member ·

    Trouble setting smaller fonts, spacing in bulled lists for mobile users in CSS

    I have set font size, expanded letter spacing and word spacing in CSS, but I want to set spacing and text size to normal for mobile phones. I have used CSS to successfully do this for headings and paragraphs, but annoyingly it doesn’t work for numbered/unnumbered lists. I’ve used

    p {
    line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em; for paragraphs and the same for headings, etc. – e.g.

    ul {
    line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em;
    }
    li {
    line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em;

    To reduce spacing & size on mobiles, I’ve used:

    @media screen and (max-width: 480px) {

    h2 {

    letter-spacing: normal;

    word-spacing: normal;

    font-size: 18px;

    }

    and the same for paragraphs, other headings and this works fine. However, list are still presented in larger size and spacing using this code after the @media screen….

    ul {
    letter-spacing: normal;
    word-spacing: normal;
    font-size: 14px;
    }

    ol {
    letter-spacing: normal;
    word-spacing: normal;
    font-size: 14px;
    }

  • Unknown's avatar
    varshasc · Member ·

    Hi there,

    Please share the site address you are working on.

  • Unknown's avatar
    paulussmit · Member ·

    The site is http://www.esltips.com.au. This image of https://www.esltips.com.au/blog/pronunciation/ viewed on a mobile phone shows the problem (headings and paragraph text is standard, but lists still show as large font and expanded spacing, despite the CSS code to not do this on mobile phones.

  • Unknown's avatar
    varshasc · Member ·

    You are using the open source WordPress software rather than WordPress.com.

    For help, you can visit https://wordpress.org/support/forums/

    Since your site isn’t hosted here, we do not have access to your account. To read about the difference, please visit our support page:

    https://wordpress.com/support/com-vs-org/

    That forum isn’t connected to your WordPress.com account nor the login name of the WordPress.org site you’re trying to access. You’ll need to create a new account if you have never logged into https://wordpress.org/support/forums/

  • The topic ‘Trouble setting smaller fonts, spacing in bulled lists for mobile users in CSS’ is closed to new replies.