Attach to Process

On some of the pinned pages on my journal, I added a “Last Updated Date” value right under the title. I did it using a span element, like this:

# Archive📜

<span class="lastUpdatedDate">Last Updated: 2021-03-17</span>

Now, instead of having it show up under the title all the time, I also wanted it to show up to the right of the title, if the screen was wide enough.

So, if the page is being viewed on a wide screen, like on a desktop computer, the “Last Updated Date” will show up on the right side. If the page is being viewed on a small screen, like on a mobile phone, the “Last Updated Date” will show up under the title.

Here is how I made it responsive using Custom CSS:

span.lastUpdatedDate {
   font-size: 0.7em; 
   color: silver; 
}
@media screen and (min-width: 480px) {
   span.lastUpdatedDate {
      float: right; 
      margin-top: -4em; 
      margin-bottom: -4em;
   }
}
@media screen and (max-width: 479px) {
   span.lastUpdatedDate {
      margin-top: -2em;
      padding-bottom: 2em;
      display: block;
   }
}

Here is what it looks like on a wide screen:

Here is what it looks like on a mobile phone:

If you know of an easier way to do this with less CSS, please let know in the comments below. Or you can do so privately by leaving me a message.

Tags: #HowTo #CSS #WriteAs

Discuss... or leave a comment below.