002-single post view-previous and next post links-mobile view

[810311]

I have 2 links at the bottom of a single post view page: previous and next. I used the following rule to try make them responsive

.single-post .nav-links {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0;
}

Then I thought that the problem might be that blog post author would probably use post titles of different lengths (one word, two words or more…) and that would look out of proportion (see red border in screeshot below)

I was thinking of may be doing some like flex: 1 1 0; on a flex parent but not sure if its a good idea in this case. Maybe I can try drop post title on the next line so it sits right under “Previous” and “Next” and then somehow make flex children nav-previous and nav-nextoccupy 50/50 of the container?

[Archibald]

I see your screenshot is for a smartphone 375 pixels wide (that’s CSS pixels). It is said that smartphones can be as narrow as 320 pixels wide. Also it seems likely that some post titles will be much longer than the examples in your screenshot. Your title to this thread is a good example!

I therefore suggest you consider a layout such as this, at least for small smartphones:

Note the use of text-overflow: ellipsis to cope with long post titles.

[810311]

Please take a look at the link below
https://test.prygara.com/demos/

I didn’t find exactly the same HTML entity for black left and right arrows like in your example though. So I used something close…

@media screen and (max-width: 1000px) {

.single-post .nav-links{
  display: block;
}

.single-post .nav-subtitle {
  display: block;
    
}
.single-post .nav-next {
  text-align: right;
}

.single-post .nav-previous .nav-title,
.single-post .nav-next .nav-title {
  
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 
}

.single-post .nav-previous .nav-title {
  content: '';
  padding-bottom: 1rem;
  border-bottom: 2px solid grey;
 
}
.single-post .nav-previous .nav-subtitle::before {
 content: "\AB";  
 }

 .single-post .nav-next .nav-subtitle::after {
  content: "\BB";  
  }

}

There was colon symbols (: ) after Next and Previous words hard coded in PHP template. I removed those. But now I need to figure out how to get those colon symbols back for desktop view. Do I again use something like pseudo-element?

<?php

the_post_navigation(
  array(
    'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous :', 'music-teacher' ) . '</span> <span class="nav-title">%title</span>',
    'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next :', 'music-teacher' ) . '</span> <span class="nav-title">%title</span>',
  )
);
?>

[Archibald]

@810311

I didn’t find exactly the same HTML entity for black left and right arrows like in your example though.

The are many Unicode arrows:

Arrow (symbol)

I find the arrows in the main Unicode block of arrows to appear very thin although I now see there are ‘better’ arrows in the Supplemental Arrows C Unicode block (for example 🡲 ):

Supplemental Arrows-C

Because the arrows in the main block of arrows appear thin, for the text in my screenshot in Post#2 I used the 'Black right-pointing triangle and ‘Black left-pointing triangle’ from the Unicode geometric shapes:

https://en.wikipedia.org/wiki/Geometric_Shapes_(Unicode_block)

Confusingly “black” refers to the shapes having solid fill, they are not outline shapes. You can make the shapes any colour by CSS.

You can simply copy and paste symbol characters. However you should check whether the font supports the symbols. Perhaps someone else on this forum would like comment on how well supported these symbols are on Mac computers and smartphones.

@810311

But now I need to figure out how to get those colon symbols back for desktop view. Do I again use something like pseudo-element?

I suggest you use ::after with:

@media screen and (min-width: 1001px)

With regard to arrows, I see in MDN here that:

Non-Latin characters must be encoded using their Unicode escape sequences: for example, \000A9 represents the copyright symbol.

However the example they give at the beginning of that web page does not use escape sequences for non-Latin content. Copy and paste seems to work

[810311]

@Archibald

I suggest you use ::after with:

@media screen and (min-width: 1001px)

Thanks for the tip @Archibald - everything appears to be working as expected.

There’s one more thing I forgot to ask. WordPress PHP template spits the following HTML for post navigation links where 2 spans .nav-subtitle and .nav-title are wrapped in an HTML anchor element. I am not sure if this is semantically correct HTML. I guess since both a and span are inline elements it is a valid markup. I came across one example in the past where anchor was wrapped around a paragraph of text and that was considered a valid HTML …

<div class="nav-previous">
   <a href="//localhost:3000/vocal/" rel="prev">
      <span class="nav-subtitle">Previous</span> 
      <span class="nav-title">Aenean eget rutrum auguen</span>
   </a>
</div>

The above markup makes the whole thing a clickable link.

[Archibald]

@810311

I am not sure if this is semantically correct HTML. I guess since both a and span are inline elements it is a valid markup.

Almost anything can go inside an <a> element (reference). In particular, your arrows could be <img> or <svg> elements.

EDIT: That reference is confusing. The HTML standard says that the context in which an <a> element can be used is where phrasing content is expected.