Title: WPSP Styling
Last modified: November 21, 2021

---

# WPSP Styling

 *  Resolved [ecstasyi](https://wordpress.org/support/users/ecstasyi/)
 * (@ecstasyi)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/)
 * Hello,
 * I want to achieve this [design](https://www.screencast.com/t/xpBtit8CGrX). Please
   help me get this done. Thank you.
    Looking forward.
 * Regards
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fwpsp-styling%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Support [Elvin](https://wordpress.org/support/users/ejcabquina/)
 * (@ejcabquina)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090310)
 * Hi there,
 * For the read more button:
 * If you want to move the read more button to the left, add this CSS:
 *     ```
       .wpsp-read-more {
           float: left;
           padding-left: 20px;
       }
       ```
   
 * If you want to change the color, add this CSS:
 *     ```
       .wpsp-read-more > a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited {
           background-color: unset;
           border: 2px solid black;
           color: black;
       }
       ```
   
 * As for the entry meta order, try this CSS:
 *     ```
       span.wp-show-posts-separator {
           display: none;
       }
   
       .wp-show-posts-entry-meta {
           display: flex;
           align-items: center;
           align-content: center;
       }
   
       .wp-show-posts-entry-meta .wp-show-posts-byline {
           order: 2;
       }
   
       .wp-show-posts-entry-meta > .wp-show-posts-posted-on:after {content: "·";margin-right: 10px;}
       ```
   
 *  Thread Starter [ecstasyi](https://wordpress.org/support/users/ecstasyi/)
 * (@ecstasyi)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090394)
 * Thank you, Eric 🙂 This is perfect.
    Now, I just need to add padding all around
   the block for mobile version. Please assist.
    -  This reply was modified 4 years, 6 months ago by [ecstasyi](https://wordpress.org/support/users/ecstasyi/).
 *  Plugin Support [Elvin](https://wordpress.org/support/users/ejcabquina/)
 * (@ejcabquina)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090403)
 * For the font color:
 *     ```
       .wp-show-posts-entry-meta a {
           color: #0a0a0a;
       }
       ```
   
 * > Secondly, I need to add padding all around the block for mobile version.
   >  Please
   > assist.
 * I’m not sure I get what you’re aiming for but you can try this:
 *     ```
       @media (max-width:768px){
       .wp-show-posts-inner {
           padding: 40px;
       }
   
       .wp-show-posts-image img {
           height: auto;
           width: 100%;
       }
       }
       ```
   
 *  Thread Starter [ecstasyi](https://wordpress.org/support/users/ecstasyi/)
 * (@ecstasyi)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090410)
 * Thanks, Eric 🙂
    The code for mobile is only moving the block content but the
   border is staying at the same place. I want to move the border too along with
   the content. I hope I was clear.
 *  Plugin Support [Elvin](https://wordpress.org/support/users/ejcabquina/)
 * (@ejcabquina)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090424)
 * Change this:
 *     ```
       @media (max-width:768px){
       .wp-show-posts-inner {
           padding: 40px;
       }
       ```
   
 * to this:
 *     ```
       @media (max-width:768px){
       article.wp-show-posts-single {
           padding: 40px;
       }
       }
       ```
   
 *  Thread Starter [ecstasyi](https://wordpress.org/support/users/ecstasyi/)
 * (@ecstasyi)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090436)
 * Thank you so much, Eric 😀
    This is exactly how I wanted it. I greatly appreciate
   it 🙂
 *  Plugin Support [Elvin](https://wordpress.org/support/users/ejcabquina/)
 * (@ejcabquina)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090441)
 * No problem. Glad to be of any help. 😀

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

The topic ‘WPSP Styling’ is closed to new replies.

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

 * 7 replies
 * 2 participants
 * Last reply from: [Elvin](https://wordpress.org/support/users/ejcabquina/)
 * Last activity: [4 years, 6 months ago](https://wordpress.org/support/topic/wpsp-styling/#post-15090441)
 * Status: resolved