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 = '<span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
   
           if ( get_the_date() !== get_the_modified_date() ) {
               $time_string = '<span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time><span class="label">Updated: </span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
           }
   
           $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 require any further information please let me know.
 * Thank you.

Viewing 15 replies - 16 through 30 (of 36 total)

[←](https://wordpress.org/support/topic/css-alignment-issue-2/?output_format=md)
[1](https://wordpress.org/support/topic/css-alignment-issue-2/?output_format=md)
2 [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/3/?output_format=md)

 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17683313)
 * 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
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17684122)
 * 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:
 *     ```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 = '<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:
 *     ```wp-block-code
       /* 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,
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17684215)
 * 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:
 * ![](https://i0.wp.com/i.postimg.cc/vBzpdrjP/desktop.png?ssl=1)
 * ![](https://i0.wp.com/i.postimg.cc/zfwQnwJJ/tablet.png?ssl=1)
 * ![](https://i0.wp.com/i.postimg.cc/tC1mrGXv/mobile.png?ssl=1)
 * 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:
 *     ```wp-block-code
       /* 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.
 *     ```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 = '<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.
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17684524)
 * As per my previous post, it is currently showing like this:
 * ![](https://i0.wp.com/i.postimg.cc/GhYM6j1R/desktop.png?ssl=1)
 * However, I have noticed that within your code, if I change from:
 *     ```wp-block-code
           .posted-on > div:last-child {
               position: relative;
               padding-right: 10px;
           }
       ```
   
 * to:
 *     ```wp-block-code
       .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:
 * ![](https://i0.wp.com/i.postimg.cc/pLbTkPPC/desktop.png?ssl=1)
 * 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):
 * ![](https://i0.wp.com/i.postimg.cc/7LSQ7MmX/desktop.png?ssl=1)
 * All the rest of the code seems to work perfectly and the published date is hidden
   when in tablet/mobile view.
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17686912)
 * 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.
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17687293)
 * 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.
 * ![](https://i0.wp.com/i.postimg.cc/3xtpptbC/desktop.png?ssl=1)
 * You will notice that the little line separating the published and updated section
   is off.
 * Checking in tablet and mobile views yields the following:
 * ![](https://i0.wp.com/i.postimg.cc/G2wpsYrx/tablet.png?ssl=1)
 * ![](https://i0.wp.com/i.postimg.cc/LskcNZLT/mobile.png?ssl=1)
 * 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.
 *     ```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 = '<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',
           );
       } );
       ```
   
 *     ```wp-block-code
       /* 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.
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17687469)
 * 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:
 *     ```wp-block-code
       .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](https://wordpress.org/support/users/media/) queries in
   my CSS eg. 601px and 600px respectively.
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17687860)
 * So like this:
 *     ```wp-block-code
       /* 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?).
 * ![](https://i0.wp.com/i.postimg.cc/TY4n1Wr1/mobile.png?ssl=1)
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17687908)
 * The avatar is being squeezed as its an image inside a flex box. Tell the DIV 
   it sits inside NOT to shrink:
 *     ```wp-block-code
       .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`
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17687980)
 * 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:
 * ![](https://i0.wp.com/i.postimg.cc/XvMMSbgJ/from.png?ssl=1)
 * to:
 * ![](https://i0.wp.com/i.postimg.cc/kGYZj347/to.png?ssl=1)
 * 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.
 * ![](https://i0.wp.com/i.postimg.cc/6qK59ZL8/mobile.png?ssl=1)
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17689843)
 * This media query
 *     ```wp-block-code
       /* 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
 *     ```wp-block-code
       .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:
 *     ```wp-block-code
       .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
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17689995)
 * 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 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/page/2/#post-17690334)
 * Entry meta has a default font size of 85% on desktop. 
   To overcome that, just
   give the the `time` element a fixed size eg.
 *     ```wp-block-code
       .entry-meta time {
           font-size: 14px;
       }
       ```
   
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17690426)
 * Ahh I see, so I am assuming this would go inside the `@media(min-width: 492px){..)`
   section?
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/#post-17690614)
 * 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

Viewing 15 replies - 16 through 30 (of 36 total)

[←](https://wordpress.org/support/topic/css-alignment-issue-2/?output_format=md)
[1](https://wordpress.org/support/topic/css-alignment-issue-2/?output_format=md)
2 [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/3/?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