WPSP Styling

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;}

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 3 years, 4 months ago by ecstasyi.

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%;
}
}

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.

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;
}
}

Thank you so much, Eric ??
This is exactly how I wanted it.
I greatly appreciate it ??

No problem. Glad to be of any help. ??