-
Posts
-
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.comHi there! Are you referring to this area?
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.
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=450Normally 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=450IMO, 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 optionsOverall, 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!
Thanks for you screenshot – it does appear that we’re seeing somewhat different things on our devices. Could you please let me know:
- what specific device you’re using (i.e. Nexus 7)
- 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
- what browser you’re using (i.e. Chrome, Safari, or other)
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.
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!
I checked your site on several Samsung Android phones, but still haven’t been able to see what you’re seeing on your phone:
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. :)
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.
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:
Let me know how it goes – hopefully I’m on the right track now!
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
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.
Hey Kathryn!
Thanks for the reply.
Alright, just checking 😊
Have a great day!
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.
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…
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.
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!
Sure! Themes are displayed in rough chronological order in the showcase, so the newer ones are listed first:
And here are themes with support for featured images:
You must be logged in to reply to this topic.
Theme Support 
