Portfolio pagination = next project link – overlaps on mobile view

[lobsterass]

Hi!

My portfolio pagination/”next project links” overlaps when viewed on mobile. Please see image. How do we fix this? Shorter titles is not an option due to SEO. I see 2 possible solutions:

1. Those links get 2 lines instead of one on mobile view.
2. The links could be called PREVIOUS PROJECT and NEXT PROJECT.

Please help!

<3

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

2. If you want to change that you need to edit the file, open up single-portfolio.php and in line #186 and #187 ( last lines ) you saw a line like this

				<div class="nav-previous"><?php next_post_link(__('<i class="fa-angle-left"></i> <span class="nav-text">%link</span>', 'swiftframework'), '%title'); ?></div>
				<div class="nav-next"><?php previous_post_link(__('<span class="nav-text">%link</span><i class="fa-angle-right"></i>', 'swiftframework'), '%title'); ?></div>

change that to,

<div class="nav-previous">Next Project</div>
<div class="nav-next">Previous Project</div>

1. I hope it won’t overlap after this, if that still overlaps after this change, use this Custom CSS in Theme Options.

@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
.pagination-wrap .nav-previous, .pagination-wrap .nav-next { float: none; max-width: 100%; text-align: left; }
}

Let us know,

Thanks,
laranz.

[lobsterass]

Hi!

Thanx! 2 lines looked bad.

To call them next and previous project is better. Only problem not is that they need to be clickable and switch place with each other. Please see image. Please tell me what’s missing in

<div class=”nav-previous”>Next Project</div>
<div class=”nav-next”>Previous Project</div>

to make that happen.

I replaced exactly the whole:

<div class=”nav-previous”><?php next_post_link(__(‘<i class=”fa-angle-left”></i> <span class=”nav-text”>%link</span>’, ‘swiftframework’), ‘%title’); ?></div>
<div class=”nav-next”><?php previous_post_link(__(‘<span class=”nav-text”>%link</span><i class=”fa-angle-right”></i>’, ‘swiftframework’), ‘%title’); ?></div>

Was that really correct?

<3

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Sorry my bad, I gave a wrong code, try this.

<div class="nav-previous"><?php next_post_link(__('<i class="fa-angle-left"></i> <span class="nav-text">%link</span>', 'swiftframework'), 'Next Project'); ?></div>
<div class="nav-next"><?php previous_post_link(__('<span class="nav-text">%link</span><i class="fa-angle-right"></i>', 'swiftframework'), 'Previous Project'); ?></div>

Let us know,

Thanks,
laranz.

[lobsterass]

Hi Laranz!

That code made all my projects lead to a blank page.

<3

[laranz – SUPPORT]

Hi,

I test myself in my local environment before giving that code, no problem Install a plugin called “WPIDE” and let me know, I will do that edit for you. I already tried to install the plugin, but I am not succeed.

Let us know,

Thanks,
laranz.

[lobsterass]

Hi Laranz!

Cool. I see it works with English. Thanx! I need it in Swedish though. But I’m gonna translate the site later so I’m thinking it would be easier to just use < and > instead. I tried to add that but it makes the code not working.

Could you help me making it like in provided image?

Also, I did activate WPIDE now. Not sure how to use it yet but it’s there!

Attachments:

You must be logged in to view attached files.

[lobsterass]

Image

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

If you want just the arrows, try this code.

<div class="nav-previous"><?php next_post_link(__('<span class="nav-text">%link</span>', 'swiftframework'), '<i class="fa-angle-left"></i>'); ?></div>
<div class="nav-next"><?php previous_post_link(__('<span class="nav-text">%link</span>', 'swiftframework'), '<i class="fa-angle-right"></i>'); ?></div>

Let me know, what you got.

Thanks,
laranz.

[lobsterass]

YES, baby! Awesome! Works great. Thanx so much dear!

<3

[laranz – SUPPORT]

Hi,

Glad it works 🙂 You are most welcome.

Let us know, if you have any other questions.

Thanks,
laranz.

[lobsterass]

Hola!

Hey, with the latest update of theme, this issue got a little messed up again. Please look at the image of the right NEXT-arrow being under the the left arrow now. I would like them to be placed one on each side. Here is what I’ve done:

single-portfolio.php and in line #186 and #187 ( last lines ) you saw a line like this:

<div class=”nav-previous”><?php next_post_link(__(‘<i class=”fa-angle-left”></i> <span class=”nav-text”>%link</span>’, ‘swiftframework’), ‘%title’); ?></div>
<div class=”nav-next”><?php previous_post_link(__(‘<span class=”nav-text”>%link</span><i class=”fa-angle-right”></i>’, ‘swiftframework’), ‘%title’); ?></div>

change that to:
<div class=”nav-previous”><?php next_post_link(__(‘<span class=”nav-text”>%link</span>’, ‘swiftframework’), ‘<i class=”fa-angle-left”></i>’); ?></div>
<div class=”nav-next”><?php previous_post_link(__(‘<span class=”nav-text”>%link</span>’, ‘swiftframework’), ‘<i class=”fa-angle-right”></i>’); ?></div>

I’ve just missed something easy, right?

<3
A

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

What is the current link for that page?
Thanks

-Rui

[laranz – SUPPORT]

HI @lobsterass,

Did you apply the CSS I gave before? Also give me the URL for the portfolio page with two arrows ( front and back ) like Gui requested.

Let us know,

Thanks,
laranz.

[lobsterass]

Hi!

Here is a link: http://monroedesign.se/portfolio/grafisk-profil-at-edward-snowden-design-i-stockholm/

Yes, I’ve added the CSS below again but it doesn’t seem to do anything…right?

@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.pagination-wrap .nav-previous, .pagination-wrap .nav-next { float: none; max-width: 100%; text-align: left; }
}

Why is it that the arrows only let you jump to like 1-4 other projects? It would have been much more user friendly if all projects always had a LEFT and a RIGHT arrow and if the user could click through the whole portfolio this way.

Now, it only works to click a couple of times (not logical or userfriendly) so I’m kind of thinking it might be best to just remove the links to the next projects all together. How do I do that?

<3