Title: Shortcode Layout
Last modified: June 27, 2023

---

# Shortcode Layout

 *  Resolved [Swan1305](https://wordpress.org/support/users/swan1305/)
 * (@swan1305)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/shortcode-layout/)
 * Hi, my current shortcode layout has a small image on the left with the title 
   on the right and the date underneath the title.
   This works fine if I only have
   a shorter 2 line title..but if it goes to 3 lines the date gets pushed left under
   the image (not sure how to post an pic on here). Can I keep the date aligned 
   under the title however short or long it is?

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

 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/shortcode-layout/#post-16852298)
 * Hi there!
 * Yes, it can be done. Please share again your shortcode (make sure to use the 
   Code block to insert it here) and I’ll show you how.
 *  Thread Starter [Swan1305](https://wordpress.org/support/users/swan1305/)
 * (@swan1305)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/shortcode-layout/#post-16852304)
 *     ```wp-block-code
       [wpp range='last24hours stats_views=0 cat='-9227' thumbnail_width=105 thumbnail_height=75 limit=6 stats_date=1 stats_date=1 stats_date_format='j F Y' post_html='<li>{thumb} {title} <br><span class="date-span">{date}</span></li>']
       ```
   
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/shortcode-layout/#post-16852364)
 * Alright, try changing your shortcode to this:
 *     ```wp-block-code
       [wpp range='last24hours' stats_views=0 cat='-9227' thumbnail_width=105 thumbnail_height=75 limit=6 stats_date=1 stats_date_format='j F Y' post_html='<li><div class="thumbnail-container">{thumb}</div> <div class="popular-post-details">{title} <br><span class="date-span">{date}</span></div></li>']
       ```
   
 * … and then add these CSS rules to your site:
 *     ```wp-block-code
       .wpp-list p:empty {
       	display: none;
       }
   
       .wpp-list li {
       	display: flex;
       	justify-content: flex-start;
       }
   
       .wpp-list li .thumbnail-container {
       	width: 105px; /* img width */
       	margin-right: 10px;
       }
   
       .wpp-list li .thumbnail-container img {
       	float: none;
       	width: 100%;
       	height: auto;
       }
   
       .wpp-list li .popular-post-details {
       	width: calc(100% - 105px - 10px); /* img width - margin */
       }
       ```
   
 *  Thread Starter [Swan1305](https://wordpress.org/support/users/swan1305/)
 * (@swan1305)
 * [2 years, 11 months ago](https://wordpress.org/support/topic/shortcode-layout/#post-16852372)
 * Perfect, thank you!

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

The topic ‘Shortcode Layout’ is closed to new replies.

 * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659)
 * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Swan1305](https://wordpress.org/support/users/swan1305/)
 * Last activity: [2 years, 11 months ago](https://wordpress.org/support/topic/shortcode-layout/#post-16852372)
 * Status: resolved