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
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/