Title: CSS Alignment Issue Last modified: April 10, 2024 --- # CSS Alignment Issue * Resolved [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/) * Good Afternoon, * I wonder if someone is able to assist with a CSS issue I have please? * I am currently working on localhost only and even though I am using LocalWP v8.3.2 +6660 to develop, it seems that it will not let me share a live link (GraphQL error). * Anyway, I am using a couple of snippets to get min reading time and to also show published date of post and Last Updated date of post (not one or the other). These are both working just fine. The issue I am having is that when a post has been updated it (correctly shows) both the original published date as well as the last updated date which is what I want. However, I am struggling with the CSS to align these next to each other. * See below: * ![](https://i0.wp.com/i.postimg.cc/v861xP1L/1.png?ssl=1) * I would like the updated section to be to the right of the published part with a 1px grey line separating the two (EG: color: 333; border-right: 1px) as opposed to underneath it. I am thinking maybe display: inline-block; but I have hit a wall with this… Here is the code I currently have: * ```wp-block-code // 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 = 'Published: '; if ( get_the_date() !== get_the_modified_date() ) { $time_string = 'Published: Updated: '; } $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( '
%s
', $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( '
%s
Written by %s Read Time: %s
', 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 require any further information please let me know. * Thank you. Viewing 15 replies - 1 through 15 (of 36 total) 1 [2](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md) [3](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/?output_format=md) [→](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md) * [David](https://wordpress.org/support/users/diggeddy/) * (@diggeddy) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17663828) * Hi there, * it would be easier to control with some additional HTML. Your second PHP snippet where the 2 x dates are returned , change it to: * ```wp-block-code // Show both Published date and Last Updated date for Posts/Articles add_filter( 'generate_post_date_output', function( $output, $time_string ) { $time_string = '
Published:
'; if ( get_the_date() !== get_the_modified_date() ) { $time_string .= '
Updated:
'; } $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( '
%s
', $time_string ); }, 10, 2 ); ``` * This will add a `
` around each date with its label. * Then use this CSS to create the layout and add the border: * ```wp-block-code .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; } ``` * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17666311) * Thank you. I have implemented the changes you gave but given how the snippet works I won’t know if it has worked until a day has passed… Unless that is, you are also able to advise on an alteration to allow it to recognise edits during the same day (going on time too)? * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17666451) * I wasn’t asking, more joking and I realise this is out of scope for free GeneratePress. I will check tomorrow and let you know. * Thank you again. * [David](https://wordpress.org/support/users/diggeddy/) * (@diggeddy) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17668143) * Unless you have some caching or some other function that intereres with those snippets executing you should see the changes immediately. * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17673279) * No caching other than the browser (which has been cleared) and a shift+F5. Still only shows the published date. - This reply was modified 2 years, 2 months ago by [Bri](https://wordpress.org/support/users/tinnyfusion/). * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17677682) * The site is now available to view: crikeythatsmint.com * One thing, (once confirmed working),if viewing on mobile then the current CSS/ design will not be able to show both the published and Last Modified date. * How would I make it show as follows on mobile?: * Stacked vertically and cantered under the users name. Published: date hereUdpated: date here * [David](https://wordpress.org/support/users/diggeddy/) * (@diggeddy) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17677690) * The site is behind a maintenance mode. * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17677700) * The other side showing authors name and read time has a smaller gap now the extra div has been added to the published and modified date section. * Can this be corrected? * *Maint mode now disabled - This reply was modified 2 years, 2 months ago by [Bri](https://wordpress.org/support/users/tinnyfusion/). - This reply was modified 2 years, 2 months ago by [Bri](https://wordpress.org/support/users/tinnyfusion/). * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 2 months ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17678391) * Additionally, I am not sure if you have seen my style.css but it has both your latest CSS (below) and the CSS I already had (also below). Is this correct? * ```wp-block-code /* 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; } /* Show post/article published date and last updated date inline END */ ``` * ```wp-block-code /* 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 */ ``` * [David](https://wordpress.org/support/users/diggeddy/) * (@diggeddy) * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17679519) * For the mobile layout: * ```wp-block-code @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; } } ``` * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17679766) * Thank you David, * The problem is though is that I cannot test it as it is still not showing the modified date… Maybe there is something wrong with the snippet? I found it on another GeneratePress related post in these forums regarding the same question that I found while searching for answers before posting myself. * Also, any chance you could there is a fix for [this](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17677700)? * To clarify, I currently have the following CSS: * ```wp-block-code /* 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 */ ``` - This reply was modified 2 years, 1 month ago by [Bri](https://wordpress.org/support/users/tinnyfusion/). * [David](https://wordpress.org/support/users/diggeddy/) * (@diggeddy) * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17679907) * has the post been modified ? As the condition in the function is : * ```wp-block-code if ( get_the_date() !== get_the_modified_date() ) { ``` * which will return the modified date if its not the same as the published ( get_the_date) * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17680097) * Not changed as far I know. This is what I currently have (along with the CSS I posted earlier): * ```wp-block-code // 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 = '
Published:
'; if ( get_the_date() !== get_the_modified_date() ) { $time_string .= '
Updated:
'; } $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( '
%s
', $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( '
%s
Written by %s Read Time: %s
', 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', ); } ); ``` * Not sure if it’d be easier to combine the above three snippets in to one.. * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17680110) * It would be nice to incorporate `human_time_diff` but I haven’t found a way to alter the modified date using that.. * So far I have only been able to target/change `get_the_date`, `the_date`, `get_the_time`, and `the_time`. * I would have thought it would be `get_the_modified_date`, `the_modified_date`,` get_the_modified_time`, and `the_modified_time` but these do not seem to do anything. * Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/) * (@tinnyfusion) * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/#post-17680416) * I have been looking at the Published and Last Updated snippet and it seems the version I have on the live site does not match the one I have on my local machine. * This is the correct one (which has also been added to the live site to replace the old one). Might be easier to work with now… Sorry about that. * ```wp-block-code // Show both Published date and Last Updated date for Posts/Articles add_filter( 'generate_post_date_output', function( $output, $time_string ) { $time_string = 'Published'; if ( get_the_date() !== get_the_modified_date() ) { $time_string = ''; $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( '
%s
', $time_string ); }, 10, 2 ); ``` * Now showing like this on desktop: * ![](https://i0.wp.com/i.postimg.cc/FH2hGSFS/desktop.png?ssl=1) * Tablet: * ![](https://i0.wp.com/i.postimg.cc/KcJFwwvx/tablet.png?ssl=1) * And mobile: * ![](https://i0.wp.com/i.postimg.cc/hjKW3bkX/mobile.png?ssl=1) * To confirm (and if possible), to have the published date moved to the side of last updated date (so everything is in line and add a grey line between them for separation/clarity. * On mobile view, show published date as normal, but if post has been updated, hide published date and only show last updated date in it’s place. * I realise that you may have to add different classes to either published/updated dates. If so, just advise what to change them to so that they correctly pointing to the correct CSS within style.css. * Thank you - This reply was modified 2 years, 1 month ago by [Bri](https://wordpress.org/support/users/tinnyfusion/). Viewing 15 replies - 1 through 15 (of 36 total) 1 [2](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md) [3](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/?output_format=md) [→](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md) The topic ‘CSS Alignment Issue’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot. png) * GeneratePress * [Support Threads](https://wordpress.org/support/theme/generatepress/) * [Active Topics](https://wordpress.org/support/theme/generatepress/active/) * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/) * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/) ## Tags * [alignment](https://wordpress.org/support/topic-tag/alignment/) * [css](https://wordpress.org/support/topic-tag/css/) * 36 replies * 2 participants * Last reply from: [David](https://wordpress.org/support/users/diggeddy/) * Last activity: [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17696160) * Status: resolved