Title: Dispatch wp post mobile align horizontal
Last modified: August 28, 2020

---

# Dispatch wp post mobile align horizontal

 *  Resolved [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/)
 * I am using the generate press dispatch theme. For the Align wp post list, it 
   works fine on the desktop. But, for mobile I want the posts to be aligned horizontally
   without the text to get stacked below the image. Also, the want the image height
   and width to be same for all the posts.
    Since, the space on mobile is less, 
   it will be useful to only show the post title and the date, omitting out the 
   excerpt.
 * Similar to the latest posts section here: [https://www.kitchenarena.in/](https://www.kitchenarena.in/)
 * I have been playing around with the css to get it to look like the above with
   no success. If someone could help me with the css, help is much appreciated.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdispatch-wp-post-mobile-align-horizontal%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13327963)
 * Hi there look for this CSS:
 *     ```
       @media (min-width:420px) {
           .wpsp-align .wp-show-posts-inner {
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex
           }
   
           .wpsp-align .wp-show-posts-inner>div {
               -webkit-box-flex: 1;
               -ms-flex: 1;
               flex: 1;
               display: -webkit-box;
               display: -ms-flexbox;
               display: flex;
               -webkit-box-orient: vertical;
               -webkit-box-direction: normal;
               -ms-flex-direction: column;
               flex-direction: column;
               -webkit-box-pack: center;
               -ms-flex-pack: center
           }
       }
       ```
   
 * And remove the `@media (min-width:420px){ }` from around the CSS.
 * Then add this CSS:
 *     ```
       @media(max-width: 420px) {
           .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
               max-width: 120px;
               margin-right: 1em;
           }
   
           .wpsp-align .wp-show-posts-inner .wp-show-posts-entry-summary {
               display: none;
           }
       }
       ```
   
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13328335)
 * Hi David, thanks for the response.
 * The css has helped with the alignment on mobile per as I wanted. A couple of 
   more things I want (to make it similar to the one here: [https://www.kitchenarena.in/](https://www.kitchenarena.in/))
 * 1. The image seems to be zoomed in, I want the full image and occupying 1/3rd
   of the width of mobile while preserving the aspect ratio (I understand that the
   height can be different then for different posts – which is ok).
    2. Date should
   appear below the title 3. The font of the title should be reduced
 * ideally, same as the one here: [https://www.kitchenarena.in/](https://www.kitchenarena.in/)
 * Thank you
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13328536)
 * Did some modifications to the css you sent.
 *     ```
       @media(max-width: 420px) {
           .wpsp-align .wp-show-posts-single {
       		margin-bottom: 0px !important;
           }
           .wpsp-align .wp-show-posts-inner .wp-show-posts-image {
               max-width: 120px;
               margin-right: 1em;
           }
   
           .wpsp-align .wp-show-posts-inner .wp-show-posts-entry-summary {
               display: none;
           }
           .wpsp-align .wp-show-posts-inner .wp-show-posts-entry-title{
       		font-size: 16px;
           }
       }
       ```
   
 * Can you please check if this looks okay?
    -  This reply was modified 5 years, 8 months ago by [singhal1992](https://wordpress.org/support/users/singhal1992/).
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13328673)
 * Looks good to me.
 * Edit your WPSP list – in there you can set the position of the meta to below 
   title.
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13328801)
 * Thanks, that’s what I was going to ask you. The meta is already set to below 
   title on the list. This css is overriding that:
 *     ```
       .generate-columns-container article .entry-header, .wp-show-posts-entry-header {
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
           -webkit-box-orient: vertical;
           -webkit-box-direction: reverse;
           -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
       }
       ```
   
 * I think this is intended to keep the category above the title in the magazine
   grid. Is there a way to disable this for the lists other than the magazine grid?
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13328986)
 * Oh yeah – long time ago i build Dispatch – i forget lol 🙂
 * Try adding this CSS to correct its position just for the Align list:
 *     ```
       .wpsp-align .wp-show-posts-inner .wp-show-posts-entry-meta {
           order: -10;
       }
       ```
   
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13329150)
 * Worked like a charm. Thanks for all the help David 🙂
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13329244)
 * One last question, on the desktop view for align, is there a way to reduce the
   width and height of the image. And since there would be more horizontal space
   for the title and excerpt, they should align with the image in the reduced height.
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13329276)
 * Unfortunately not with how the it is set up. You would have to give all the images
   a max-height which would break responsiveness.
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13329438)
 * understood, thanks.
 *  Thread Starter [singhal1992](https://wordpress.org/support/users/singhal1992/)
 * (@singhal1992)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13329981)
 * Marking resolved. Thanks again for the help 🙂
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-13330296)
 * You’re welcome
 *  [myrqicrtb](https://wordpress.org/support/users/myrqicrtb/)
 * (@myrqicrtb)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-14077281)
 * Eat self-made cakes and other recipes which require grilling and baking. Must
   read review of microwave ovens.
    [https://www.offersingh.com/best-microwave-ovens-india/](https://www.offersingh.com/best-microwave-ovens-india/)

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Dispatch wp post mobile align horizontal’ 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/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 13 replies
 * 3 participants
 * Last reply from: [myrqicrtb](https://wordpress.org/support/users/myrqicrtb/)
 * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/dispatch-wp-post-mobile-align-horizontal/#post-14077281)
 * Status: resolved