[Resolved] Change Pagination Text on Mobile

[Guy]

Hi There.
I wish to change the text of the pagination for “Next” and “Previous”
Only for mobile.
Is there any way I can do that through function.php?

Thanks!

Guy

[David]

Hi, what would you want to change the text to?

[Guy]

to “Next” and “Previous”.
without the name of the post Only on mobile since the names of the projects are too long for mobile…

Thanks!!!!

[David]

You can try this:

@media (max-width: 480px) {
    .post-navigation .nav-previous .prev a, .post-navigation .nav-next .next a {
        visibility: hidden;
    	font-size: 0em !important;
    }    
    .post-navigation .nav-previous .prev a:after {
        content: 'Previous';
    }
    .post-navigation .nav-next .next a:after {
        content: 'Next';

    }
    .post-navigation .nav-previous .prev a:after,
    .post-navigation .nav-next .next a:after {
        visibility: visible;
        font-size: 16px !important;
    }
    .nav-next .next:before {
        content: "";
    }
    .nav-previous .prev:before {
        width: 0px !important;
    }
    .nav-previous .prev .smaller {
        font-size: 0em !important;
        margin: 0 !important;
    }
}

[Guy]

Thank so much for your response.
I tried doing what you suggested, but then trying to fix the css was impossible.
The thing is that the “next” and”previous” are floating in a very strange place around there.
http://80.179.140.91/~sharon2/branding/mint-groupcondominium-servicestoronto-canada/

Is there any way of doing that through a hook?

Thank again

Guy

[David]

Hi Guy, i will speak with Tom to see if it’s possible to hook a second filtered nav that is only displayed on mobile.

But in the meantime, if you want to just add the code i provided and i’ll take a look to see if i can align it for you. Let me know,

[Guy]

I added. You can watch in on mobile…

[David]

Hi Guy, i have updated the code above, lost of ‘unpicking’ to do. So give that a shot and let me know.

[Guy]

	.post-navigation .nav-previous .prev a, .post-navigation .nav-next .next a {
        visibility: hidden;
    	font-size: 0em !important;
    }    
    .post-navigation .nav-previous .prev a:after {
        content: '< Previous';
    }
    .post-navigation .nav-next .next a:after {
        content: 'Next >';

    }
    .post-navigation .nav-previous .prev a:after,
    .post-navigation .nav-next .next a:after {
    visibility: visible;
    font-size: 1rem;
	line-height: 1.5em;
	font-weight: 300;
	letter-spacing: 0.05rem;
	
	}
	
	    .post-navigation .nav-previous .prev a:after{
        position: relative;
			left: -35px;
    }
	
	.post-navigation .nav-next .next a:after {
		
	position: relative;
			left: 22px;
		
		
	}
    .nav-next .next:before {
        content: "";
    }
	 .nav-previous .prev:before {
        content: "";
    }
	
    .nav-previous .prev:before {
        width: 0px !important;
    }
    .nav-previous .prev .smaller {
        font-size: 0em !important;
        margin: 0 !important;
    }
	
	

Solved 🙂 Thanks!!!!

[David]

Hi Guy, that did take some ‘unpicking’ lol. Glad you found a solution!

[Author]

Posts