Change Pagination Text on Mobile

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

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

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;
    }
}

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

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,

I added. You can watch in on mobile...

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

	.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!!!!

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