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.
