Responsive CSS Changes

A few have asked about making CSS changes to the post nav and ive added the CSS which you should change below.

Below is the default css for responsive screen sizes. You can make modifications within you child theme / customiser adding !important after each declaration to make the modification on the front end.

Ive removed the ones which would normally not apply, and bolded what should be changed. The whole file is accessible within the /public folder under css.

@media only screen and (max-width: 48em) {

.wp-post-nav #post-nav-previous-default {
height: 10vh;
width: 45vw;
line-height: 19px;
bottom: 5vh;
left: 0;
z-index: 100;
padding:10px;
}

.wp-post-nav #post-nav-previous-default:before {
content: url(‘../images/left-arrow.png’);
position:fixed;
bottom:50%;
right:0;
margin-right:10px;
transform:translateY(70%);
}

.wp-post-nav #post-nav-next-default {
height: 10vh;
width: 45vw;
line-height: 19px;
bottom: 5vh;
right: 0;
z-index: 100;
padding:10px;
}

.wp-post-nav #post-nav-next-default:before {
content: url(‘../images/right-arrow.png’);
position:fixed;
bottom:50%;
transform:translateY(70%);
}

.wp-post-nav #post-nav-next-default .post-nav-title {
text-align:center;
font-size:12px;
text-transform:capitalize;
margin-bottom:3%;
margin-top:12%;
margin-left:20px;
}

.wp-post-nav #post-nav-previous-default .post-nav-title {
text-align:center;
font-size:12px;
text-transform:capitalize;
margin-bottom:3%;
margin-top:12%;
margin-right:20px;
}
}