Title: Responsive CSS Changes
Last modified: April 8, 2020

---

# Responsive CSS Changes

 *  ResolvedPlugin Author [Jo4nny8](https://wordpress.org/support/users/jo4nny8/)
 * (@jo4nny8)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/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](https://wordpress.org/support/users/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; } }

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Parmen](https://wordpress.org/support/users/parmen/)
 * (@parmen)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/responsive-css-changes/#post-13089651)
 * Hi, John. Thank you for your time and nice plugin! Tried the above code but didn’t
   like the view of the buttons on my smartphone. They totally occupy the bottom
   part of the screen and hide what is behind when you scroll down.
 * So I experimented with some values and succeeded to retain on my phone the same
   view as on my PC or wide tablet. BUT only in RTL switched mode.
 * Please advise…
 * BTW, how to understand this on the settings page:
 * > By default, the NEXT post is shown on the left (latest post) and the PREVIOUS
   > post is shown on the right (older post) – This options swops the display side
 * Isn’t it the opposite?
 * Here is the example page
    [https://www.lyulin.com/general/1120/облак-от-тагове](https://www.lyulin.com/general/1120/облак-от-тагове)
 *  Plugin Author [Jo4nny8](https://wordpress.org/support/users/jo4nny8/)
 * (@jo4nny8)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/responsive-css-changes/#post-13090242)
 * For the CSS, the default css rules follow the below pattern
 * “selector”.post-nav-previous-**default** where default is standard operation.
 * For “switched” operation, the selector changes to
    “selector”.post-nav-previous-**
   switched**
 * You just alter the css to suit the way you are using the plugin.
 * >  BTW, how to understand this on the settings page:
   > By default, the NEXT post is shown on the left (latest post) and the PREVIOUS
   > post is shown on the right (older post) – This options swops the display side
 * So for default, the latest (most recently published post) is shown on the left
   hand side of the screen, the next oldest (published before the current one) is
   shown on the right hand side of the screen.
 * The switched option, changes this to the opposite sides.
 *  [Parmen](https://wordpress.org/support/users/parmen/)
 * (@parmen)
 * [5 years, 10 months ago](https://wordpress.org/support/topic/responsive-css-changes/#post-13090435)
 * Now I am in a switched mode and my next post is on the left side. The older one
   is on the right side. This is good for sites with RTL orientation.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive CSS Changes’ is closed to new replies.

 * ![](https://ps.w.org/wp-post-nav/assets/icon-256x256.jpeg?rev=1969751)
 * [WP Post Nav](https://wordpress.org/plugins/wp-post-nav/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-post-nav/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-post-nav/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-post-nav/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-post-nav/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-post-nav/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Parmen](https://wordpress.org/support/users/parmen/)
 * Last activity: [5 years, 10 months ago](https://wordpress.org/support/topic/responsive-css-changes/#post-13090435)
 * Status: resolved