Make previous and next links on each post more prominent (on mobile at least)

Home Forums Automattic Bon Vivant Make previous and next links on each post more prominent (on mobile at least)

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #164507 Resolve

    Natasha

    Hello,

    I am using your theme and have a question.

    Within each post you provide, at the end of each post, the link (with post title text) to the next post and previous post (this is right before the leave a reply-comment section). This is perfect, except that on mobile it is not prominent.

    I was wondering if there is a way to make it more prominent for mobile at least (i.e. border, highlight, color)…

    The blog I need help with is nplusg.com
    #164508

    Kathryn P.
    Happiness Engineer

    Hi there! Are you referring to this area?

    IPhone 6 Plus 11 2 2

    We could certainly use some custom CSS to change the look on smaller screens – for example, make the text red on white instead of the reverse:

    
    /* Change look of single-post navigation on smaller screens */
    @media screen and ( max-width: 740px ) {
      .navigation-post .previous, .navigation-post .next {
        background-color: #ffffff;
      }
      .navigation-post .previous a, .navigation-post .next a {
        color: #b00;
      } 
    }
    

    Let me know what you think. We can tweak it in a different way if you prefer – just let me know what you’d like and I’m happy to help.

    • This reply was modified 2 years, 5 months ago by  Kathryn P.. Reason: fix code formatting
    #164510

    Natasha

    Hello Kathryn,

    Thank you for your reply.

    Yes, sorry I had already gone ahead and made some changes before your reply so as to achieve the result that I wanted.

    Having said that, yes, that is the area I was talking about along with the homepage previous-next option.
    https://i1.wp.com/nplusgcom.files.wordpress.com/2018/04/sugg2.png?ssl=1&w=450

    Normally your template design shows them as simply a (text) link, but as you saw I changed it so as to separate them and make it “more prominent”.

    I checked it out and your suggestion returns this:
    https://i1.wp.com/nplusgcom.files.wordpress.com/2018/04/sugg.jpg?ssl=1&w=450

    IMO, I don’t think that it makes it very clear to the reader that those are:

    1. 2 separate options (links)
    2. Previous and Next options

    Overall, I like the template a lot! Just needed that fix to suit my site needs.

    If you have an alternative suggestion along the lines of the need stated above, I would love to see…

    Thanks!

    #164511

    Kathryn P.
    Happiness Engineer

    Thanks for you screenshot – it does appear that we’re seeing somewhat different things on our devices. Could you please let me know:

    I’ve checked your site on several different iPhones and am seeing separate rounded rectangles for the previous/next link all of them, unlike what I see in your screenshot. Once you let me know what device you’re using, that’ll help me troubleshoot.

    #164512

    Natasha

    Hey Kathryn!

    Thank you for your reply and for your support!

    Interesting!

    OK, here you go!

    — what specific device you’re using (i.e. Nexus 7)

    For mobile, Samsung 8

    — what version of Android or iOS you’re using (i.e. Android 4.4.4 Kitkat) – visit http://whatismyandroidversion.com/ or https://supportdetails.com/ if you’re not sure

    Android 8.0.0

    — what browser you’re using (i.e. Chrome, Safari, or other)

    Firefox

    Hope that helps!

    Whatever I info you need to help you sort it out and troubleshoot, let me know!

    Regards!

    #164513

    Kathryn P.
    Happiness Engineer

    Thanks for the info. I’m going to do some cross-browser/cross-device testing and get back to you.

    #164514

    Kathryn P.
    Happiness Engineer

    I checked your site on several Samsung Android phones, but still haven’t been able to see what you’re seeing on your phone:

    Dashboard 1

    Dashboard

    Dashboard 2

    Can you narrow down the Samsung model you’re using even further?

    Having now spot-checked your site on a bunch of different phones, I’m guessing there’s something very specific to your setup that’s causing the issue, and we might not be able to narrow it down or target it specifically. So far, it definitely looks to me like most of your visitors will be seeing the post navigation as I am. :)

    #164522

    Natasha

    Hi Kathryn!

    I am a bit confused.

    In the image I sent you (with MY changes) I see the red rounded previous-next. Which is correct.

    That is what you see as well (unless I’m missing something)

    If when you stated that you see something different you are referring to the 1st image I sent you (with YOUR suggestion) I was seeing the “square / boxed” white (with red text) links.

    I didn’t keep that live on my site (after testing) as I couldn’t, for obvious reasons.

    I understood that you are not able to see the red rounded changes I made (as shown in image I sent you).

    Can you please clarify as I am starting to believe there might be a miscommunication and want to avoid any confusion.

    #164531

    Kathryn P.
    Happiness Engineer

    Apologies for the confusion – definitely a misunderstanding on my part. Let’s straighten things out now!

    I had a closer look at the CSS you added previously, and I think I understand what’s going on more clearly. I didn’t realize how much CSS you had added yourself; I see it now and think I can give you better guidance. :)

    Let’s take a look at this chunk of custom CSS you’ve added:

    
    /*
    =========================================================
    Styling previous and next navigation links (Inner) =========================================================
    */
    .navigation-paging .previous, .navigation-paging .next, .navigation-post .previous, .navigation-post .next {
    	max-width: 40%;
    	border: 1px solid #fff;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	padding: 5px 10px;
    	border-radius: 15px;
    	background-color: #bb0000;
    }
    

    Could you try changing that block to:

    
    /* =========================================================
    Styling previous and next navigation links (Inner) =========================================================
    */
    .navigation-post .previous, .navigation-post .next { /* remove duplicate selectors that were already in the block called Styling previous and next navigation links (Home) */
    	max-width: 40%;
    	border: 1px solid #fff;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	padding: 5px 10px;
    	border-radius: 15px;
    	background-color: #fff; /* make background white */
    
    }
    .navigation-post .previous a, .navigation-post .next a {
    	color: #bb0000; /* make links red */
    }
    

    It should look like this, and applies to every screen size:

    Customize Interview Series Cathy Wassell nplusg 2

    Let me know how it goes – hopefully I’m on the right track now!

    #164534

    Natasha

    Hey Kathryn,

    Thank you for your reply and your assistance!

    All good!

    Made the changes and they are working. You can have a look!

    Thanks!

    Quick question, having made the changes I noticed that the boxes are not the same size (they go according to the length of the text in the title). This renders, for example, one link with 2 lines and the other with 3 (see attached image). IF I wanted to make BOTH SET/FIXED 2 line links, or 3 line links for example (in the case the title is longer it would simply display “…”) could I do that?

    Thanks again!

    https://i2.wp.com/nplusgcom.files.wordpress.com/2018/04/test5.jpg?ssl=1&w=450

    #164536

    Kathryn P.
    Happiness Engineer

    Made the changes and they are working. You can have a look!

    Great!

    Quick question, having made the changes I noticed that the boxes are not the same size (they go according to the length of the text in the title). This renders, for example, one link with 2 lines and the other with 3 (see attached image). IF I wanted to make BOTH SET/FIXED 2 line links, or 3 line links for example (in the case the title is longer it would simply display “…”) could I do that?

    That sort of change isn’t possible with CSS.

    #164537

    Natasha

    Hey Kathryn!

    Thanks for the reply.

    Alright, just checking 😊

    Have a great day!

    #164539

    Kathryn P.
    Happiness Engineer

    My pleasure – you too!

    I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

    #164586

    Natasha

    Hi Kathryn!

    As I am trying to improve website look, I wanted to ask if there is a way for featured images to be displayed in your theme…

    #164587

    Kathryn P.
    Happiness Engineer

    Hi Natasha – thanks for the suggestion. As you’ve noticed, Bon Vivant doesn’t display featured images, and as an older theme we have no plans to add enhancements at this stage.

    One way to get around that limitation would be to add some custom CSS for every post or page where you’d like to display a featured image. It’s a but cumbersome, but it could work.

    For example, for this page:

    Video Review: “50 States, 100 Days – The Book”

    
    .postid-860 .header-image img {
      visibility: hidden;
    }
    .postid-860 .header-image {
      background-image: url(https://nplusgcom.files.wordpress.com/2018/05/pexels-photo3.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
    

    And if you have multiple posts or pages to target, we can show you how to consolidate the code so you don’t have to repeat every single line. Let me know if you decide to go this route and I can explain more about how to refactor the code for use on multiple posts and/or pages.

    p.s. in future, please start a new thread once it’s been marked as resolved, otherwise it’s easy for us to miss your reply. Thanks! I’ll mark this one unresolved again.

    #164588

    Natasha

    Hi Kathryn,

    Firstly my apologies for not having started a new thread. Will keep it in mind for future topics ( as you stated you would now mark it as unresolved).

    Quick question: wasnt aware it was an old theme (maybe I missed that part). Have you guys released newer templates that I could take a look at?

    I think I will just let it be without featured image…

    Do let me know of any new templates you have released 😊

    Thanks!

    #164589

    Kathryn P.
    Happiness Engineer

    Sure! Themes are displayed in rough chronological order in the showcase, so the newer ones are listed first:

    https://wordpress.com/themes/

    And here are themes with support for featured images:

    https://wordpress.com/themes/filter/featured-images

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.