Search code examples
csswordpressmedia-queries

Format the Previous and the Next links for mobile devices in Twenty Sixteen theme


I try for several days to change how are displayed the Previous and the Next navigation links for single posts on mobile devices in a Wordpress Twenty Sixteen child theme, more specifically, their font properties, but without success. I am able to format them for desktops, but not for mobile devices. I know about CSS media queries, but I am unable to find a solution in my situation. Can someone who knows this theme to suggest me any ideas?

This is what I tried the last time:

@media screen and (max-width: 75em) {
   .post-navigation a .post-title {
      color: #007acc;
      font-size: 1rem;
      line-height: 1.25;
   }
}

This is my development site: dev.infopsi.md

This is a single post: http://dev.infopsi.md/2016/10/17/salut-lume.html


Solution

  • The problem was in the CSS file, which wasn't valid.

    The @media screen and (max-width: 75em) block was inside another @media block (which is not valid CSS):

    You can't do this:

    @media screen and (min-width: 61.5625em) {
    ....
    ....
    @media screen and (max-width: 75em) {
    ....
    ....
    }
    

    You must first close the first @media block:

    @media screen and (min-width: 61.5625em) {
    ....
    ....
    }
    @media screen and (max-width: 75em) {
    ....
    ....
    }
    

    The easiest way to find such errors is to use a CSS validator:
    https://jigsaw.w3.org/css-validator/