Iurie Iurie - 1 month ago 8
CSS Question

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

Answer

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/

Comments