CSS Alignment Issue

Mot sure if, as per a previous forum post, you are not receiving notifications… but just wondering if there is any progress with this?

Thanks

You must consider the scope of this support forum is to help users with the Free theme as opposed to providing free development services. And as much as we like helping our users to achieve all their end results this kind of topic comes at a cost to us and to our users who require legitimate support. We therefore have to prioritise the latter requirement.

For your current setup, the PHP would change to this:

// Show both Published date and Last Updated date for Posts/Articles
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<div><span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time></div>';

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = '<div><span class="label">Updated: </span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time></div>' . $time_string;
    }
    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date( 'jS F, Y' ) ), // Adjusted format for published date
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date( 'jS F, Y' ) ) // Adjusted format for modified date
    );

    return sprintf( '<div class="posted-on">%s</div> ', $time_string );
}, 10, 2 );

The change is to reverse the order in which we output the dates. It also does not include any HTML for the bar, as thats presentational and we will add with CSS.

Then this CSS:

/* format the span label */
.posted-on > div span {
    font-size: 0.85rem;
    color:  #aaa;
}
/* set the deskop layout */
@media(min-width: 769px) {
    .posted-on {
        display: flex;
        flex-direction: row-reverse;
        column-gap: 10px;
    }
    .posted-on > div {
        text-align: right;
        display: flex;
        flex-direction: column;
    }
    .posted-on > div:last-child {
        position: relative;
        padding-right: 10px;
    }
    .posted-on > div:last-child:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 2px;
        width: 1px;
        height: 20px;
        background-color: #aaa;
    }
}
/* remove the second date div on mobile */
@media(max-width: 768px) {
    .posted-on > div + div {
        display: none;
    }
}

In the PHP we reversed the date order which we then correct in the Desktop CSS using the flex-direction property. This allows us on the Mobile CSS to hide the second DIV, which has the published date. If there is no modified date then there is no second DIV to remove and so that CSS does not do anything,

Good Morning David,

Firstly I would like to say thank you for all of the support and time you give to not only myself but to every single person here. I truly appreciate every second of your time.

I have changed the snippet and CSS as per your instructions and this is the result for desktop, tablet, and mobile views:

As you can see, in desktop view the updated and published dates are still stacked as opposed to being next to each other with the line separating them. If they were next to each other then they would be in line with the avatar, poster and read time shown to the left.

On tablet and mobile views it looks awesome except for one tiny detail. In all views there is a little line on the very right hand side which shouldn’t be there. I have looked through the CSS provided and couldn’t tell where this extra border line was being applied.

My current CSS is a little bit intermingled I think and is as follows:

/* CSS for when viewed on mobile device only START */
@media (max-width: 768px) {
    /* Add space above and below Contact button */
    .main-navigation .main-nav ul li.contact-button a { margin-top: 10px; margin-bottom: 20px; }

    /* Hide user avatar */
    .entry-header .author.vcard { display: none; }
    .entry-header .author-wrap, .entry-header .posted-on { padding: 0 !important; }
    .entry-meta .label .entry-date { font-size: 5px; }

    /* Hide site tag line */
    .site-description { display: none; }
}
/* CSS for when viewed on mobile device only END */

/* Show post/article published date and last updated date inline START */
.posted-on,
.posted-on > div {
    display: flex;
}
.posted-on > div {
    flex-direction: column;
}
.posted-on > div:first-child {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #ccc;
}

@media(max-width: 768px) {
    .entry-header .entry-meta {
        flex-wrap: wrap;
    }
    .entry-header .entry-meta .posted-on {
        flex-basis: 100%;
    }
    .entry-header .entry-meta .posted-on > div {
        flex-direction: row;
        column-gap: 10px;
        align-items: flex-start;
    }
}
/* Show post/article published date and last updated date inline END */

/* User meta information START */
.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
    display: flex;
}

.entry-meta {
    align-items: center;
    justify-content: center;
}

.entry-meta .posted-on,
.entry-meta .author-wrap {
    flex-direction: column;
    font-size: 16px;
    padding: 0 25px;
    flex: 1;
}

.entry-meta .posted-on {
    text-align: right;
}

.entry-meta .label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 0.25em;
}

.author img {
    width: 60px;
    height: 60px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    border-radius: 50%;
    vertical-align: middle;
}
/* User meta information END */

/* New CSS from David @ GeneratePress START */
/* format the span label */
.posted-on > div span {
    font-size: 0.85rem;
    color:  #aaa;
}
/* set the deskop layout */
@media(min-width: 769px) {
    .posted-on {
        display: flex;
        flex-direction: row-reverse;
        column-gap: 10px;
    }
    .posted-on > div {
        text-align: right;
        display: flex;
        flex-direction: column;
    }
    .posted-on > div:last-child {
        position: relative;
        padding-right: 10px;
    }
    .posted-on > div:last-child:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 2px;
        width: 1px;
        height: 20px;
        background-color: #aaa;
    }
}
/* remove the second date div on mobile */
@media(max-width: 768px) {
    .posted-on > div + div {
        display: none;
    }
}
/* New CSS from David @ GeneratePress END */

As for the snippet(s), as you know I have three that together produce the current view showing the posts authors avatar, name, and read time. I will post these below too as there may be CSS/formatting which is relevant.

// Calclate estimated reading time of Article/Post from number of words
function reading_time() {
    global $post;
    $content = get_post_field( 'post_content', $post->ID );
    $word_count = str_word_count( strip_tags( $content ) );
    $readingtime = ceil($word_count / 183); // Change to edit reading speed (WPM). Slow=100, Ave=183, and fast=260

    if ($readingtime == 1) {
      $timer = " min"; // minute
    } else {
      $timer = " mins"; // minutes
    }
    $totalreadingtime = esc_html($readingtime . $timer);

    return $totalreadingtime;
}

// Show both Published date and Last Updated date for Posts/Articles
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<div><span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time></div>';

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = '<div><span class="label">Updated: </span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time></div>' . $time_string;
    }
    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date( 'jS F, Y' ) ), // Adjusted format for published date
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date( 'jS F, Y' ) ) // Adjusted format for modified date
    );

    return sprintf( '<div class="posted-on">%s</div> ', $time_string );
}, 10, 2 );


// Generate author image and name with reading time
add_filter( 'generate_post_author_output', function() {
    // Calculate reading time dynamically
    $reading_time = reading_time();

    // Output author information without the link
    return sprintf( '<div class="author vcard">%s</div><div class="author-wrap"><span>Written by <span class="author-name" itemprop="name">%s&nbsp;</span></span><span class="label" id="reading-time">Read Time: %s</span></div>',
            get_avatar( get_the_author_meta( 'ID' ) ),
            esc_html( get_the_author() ),
            $reading_time
    );
} );

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'author',
        'date',
    );
} );

If you could offer any help with these final formatting issues I would be extremely grateful.

Thank you so very much.

As per my previous post, it is currently showing like this:

However, I have noticed that within your code, if I change from:

    .posted-on > div:last-child {
        position: relative;
        padding-right: 10px;
    }

to:

.posted-on > div:last-child {
    position: absolute;
    padding-right: 10px;
}

then the published date is on the same row/level as the updated date which is how I’d like it, but then it just seems to be free floating and not aligned to the side of the updated date block:

If it is possible to have the published date part to be next to the published date part with the little line that is next to the published date also carry on up as it does on the updated date block, then finally remove the line on the updated date block altogether that would be fantastic.

Like this (mock up made in Paint .net):

All the rest of the code seems to work perfectly and the published date is hidden when in tablet/mobile view.

The PHP and CSS i provided above does exactly what you requested.
So i suspect you still have other CSS that is related to that element.
I suggest removing ALL other related CSS and just add what i provided above.

Hi David, ok I removed all CSS pertaining to that area and replaced with only yours. This indeed did format the published and last modified date exactly as I requested.

I had tried so many different ways to sort this out that I got sloppy with the CSS that had previously been added/removed. My apologies.

However, with only your CSS the avatar, author, and read time then had zero styling so I then systematically started adding my CSS back making sure to only style those elements.

I have hit one snag though, this is the closest I can get it without completely breaking the design on the avatar, author, and read time.

You will notice that the little line separating the published and updated section is off.

Checking in tablet and mobile views yields the following:

The published date could still be shown along with the updated date in tablet view.

The title size in tablet or mobile view I can alter later and is not an issue. However, in both tablet and mobile the font for the date seems to go up in size when it should be the same as the written by author part view. Mobile view is correctly showing just the updated date but the formatting is all over the place and I have no idea how to sort that out.

Below are the snippets I am currently using and the CSS.

// Calclate estimated reading time of Article/Post from number of words
function reading_time() {
    global $post;
    $content = get_post_field( 'post_content', $post->ID );
    $word_count = str_word_count( strip_tags( $content ) );
    $readingtime = ceil($word_count / 183); // Change to edit reading speed (WPM). Slow=100, Ave=183, and fast=260

    if ($readingtime == 1) {
      $timer = " min"; // minute
    } else {
      $timer = " mins"; // minutes
    }
    $totalreadingtime = $readingtime . $timer;

    return $totalreadingtime;
}

// Show both Published date and Last Updated date for Posts/Articles
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<div><span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time></div>';

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = '<div><span class="label">Updated: </span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time></div>' . $time_string;
    }
    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date( 'jS F, Y' ) ), // Adjusted format for published date
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date( 'jS F, Y' ) ) // Adjusted format for modified date
    );

    return sprintf( '<div class="posted-on">%s</div> ', $time_string );
}, 10, 2 );

// Generate author image and name with reading time
add_filter( 'generate_post_author_output', function() {
    // Calculate reading time dynamically
    $reading_time = reading_time();

    // Output author information without the link
    return sprintf( '
					<div>
						<span class="author vcard">%s</span>
					</div>
					<div class="author-wrap">
						<span>Written by <span class="author-name" itemprop="name">%s</span></span>
						<span class="label" id="reading-time">Approximatly %s to read</span>
					</div>',
            get_avatar( get_the_author_meta( 'ID' ) ),
            esc_html( get_the_author() ),
            $reading_time
    );
} );

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'author',
        'date',
    );
} );

/* MY CSS START */
/* User meta information START */
@media (max-width: 768px) {
    /* Hide user avatar */
    .entry-header .author.vcard { display: none; }

    /* Hide site tag line */
    .site-description { display: none; }
}

.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
    display: flex;
}

.entry-meta .author-wrap {
    flex-direction: column;
    font-size: 16px;
    padding: 0 25px;
    flex: 1;
}

.entry-meta .label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 0.25em;
}

.author img {
    width: 60px;
    height: 60px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    border-radius: 50%;
    vertical-align: middle;
}
/* MY CSS END */

/* DAVIDS CSS START */
/* format the span label */
.posted-on > div span {
    font-size: 0.85rem;
    color:  #aaa;
}
/* set the deskop layout */
@media(min-width: 769px) {
    .posted-on {
        display: flex;
        flex-direction: row-reverse;
        column-gap: 10px;
    }
    .posted-on > div {
        text-align: right;
        display: flex;
        flex-direction: column;
    }
    .posted-on > div:last-child {
        position: relative;
        padding-right: 10px;
    }
    .posted-on > div:last-child:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 2px;
        width: 1px;
        height: 20px;
        background-color: #aaa;
    }
}
/* remove the second date div on mobile */
@media(max-width: 768px) {
    .posted-on > div + div {
        display: none;
    }
}
/* DAVIDS CSS END */

Overall the design is nearly there. Please help iron out these last few issues.

The entry-meta is set to display: flex , by default all flex children attract the height of that row. Which is defined by the tallest child ie. the avatar.
So the <div> will be the height of the avatar, and the border line which is position bottom: 0 is aligned to the bottom of the row.
To fix that you can align the items to the flex-start using the following CSS:

.entry-header .entry-meta {
    align-items: flex-start;
}

To keep both dates stacked on smaller devices, adjust the min-width and max-width used in the 2 @media queries in my CSS eg. 601px and 600px respectively.

So like this:

/* MY CSS START */
/* User meta information START */
.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
    display: flex;
}

.entry-header .entry-meta {
    align-items: flex-start;
}

.entry-meta .author-wrap {
    flex-direction: column;
    font-size: 16px;
    padding: 0 25px;
    flex: 1;
}

.entry-meta .label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 0.25em;
}

.author img {
    width: 60px;
    height: 60px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    border-radius: 50%;
    vertical-align: middle;
}
/* MY CSS END */



/* DAVIDS CSS START */
/* format the span label */
.posted-on > div span {
    font-size: 0.85rem;
    color:  #aaa;
}
/* set the deskop layout */
@media(min-width: 601px) {
    .posted-on {
        display: flex;
        flex-direction: row-reverse;
        column-gap: 10px;
    }
    .posted-on > div {
        text-align: right;
        display: flex;
        flex-direction: column;
    }
    .posted-on > div:last-child {
        position: relative;
        padding-right: 10px;
    }
    .posted-on > div:last-child:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 2px;
        width: 1px;
        height: 20px;
        background-color: #aaa;
    }
}
/* remove the second date div on mobile */
@media(max-width: 600px) {
    .posted-on > div + div {
        display: none;
    }
}
/* DAVIDS CSS END */

That 97% works just how I need it. The only issues I see are that when the updated date is not being displayed, it is still showing the grey line. I have tried to move it to the left edge of the updated part as opposed to having it on the right edge of the published part so that it is not shown when the updated/modified date is not being shown but I cannot see exactly how to do this.

And the updated date switches to be on the same line as the grey title that says ‘Updated:’ as opposed to staying below it as it is on the desktop view.

Other than that, the final thing is that the avatar gets squashed when viewing on mobile (this looks fine on tablet and desktop views). With this in mind, could the avatar simply be hidden when viewing on mobile (which I am guessing would also give a little bit more space for the rest of the information being shown?).

The avatar is being squeezed as its an image inside a flex box. Tell the DIV it sits inside NOT to shrink:

.entry-meta > div {
    flex-shrink: 0;
}

The border when updated is missing. Change:
.posted-on > div:last-child:before
TO:
.posted-on > div + div:before

Cool, the line and avatar are now behaving correctly. Last bits are that when switching to tablet view (around 768px width when the side-bar disappears) the published and modified date’s font seems to jump up in size from 14px to 17px.

From:

to:

Then as I continue to lower the width of the browser and the @media-query for mobile kicks in, the date moves to the side of the grey title as opposed to staying underneath.

This media query

/* set the deskop layout */
@media(min-width: 601px) {

reduce the value to a suitable size eg. 501px – tweak it to suit

Next you want to stop the author wrap from getting squeezed. See this CSS

.entry-meta .author-wrap {
    flex-direction: column;
    font-size: 16px;
    padding: 0 25px;
    flex: 1 0 auto;
}

Change the flex: 1 property to the above ie. flex: 1 0 auto; it will top that content from getting squeezed

And this:

.entry-header .entry-meta {
    align-items: flex-start;
    flex-wrap: wrap;
}

add the flex-wrap: wrap property this way the date will move below the author meta when there is not enough room

Hi David,

Thank you for getting back to me. I have made the changes as requested and it is 99.9% there. The @media(min-width: ...px)‘s sweet spot was 492px.

The final issue (and hopefully a small one), is that when it swaps from desktop view to tablet view the font for the published (entry-date published) and updated (entry-date published) date still increases from 14px to 17px which looks really odd since the author text on the other side stays the same size.

• This reply was modified 11 months, 1 week ago by Bri.

Entry meta has a default font size of 85% on desktop.
To overcome that, just give the the time element a fixed size eg.

.entry-meta time {
    font-size: 14px;
}

Ahh I see, so I am assuming this would go inside the @media(min-width:?492px)?{..) section?

Nope. You can add it outside of the media query and it will set that font size for all screen sizes.
Only add it inside the media query if you want that to switch sizes based on screen size