How to add Responsive “Last Updated Date” to Pinned Pages on Write.as

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: Last Updated Date showing up on the right side of the title.

Here is what it looks like on a mobile phone: Last Updated Date showing up under the title on a small screen.

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.