Centralise the "Read More" Button

This topic has 12 replies, 3 voices, and was last updated 4 years, 8 months ago by Tom.

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

Author

Posts
October 2, 2018 at 12:33 am #6068

Andy
Participant

Hi

I bought WP SHowposts Pro today and it is exactly what I need for my website

Please could I suggest a future upgrade whereby there is an option to “centralize” the “Read More…” button either on a page or in a column?

Look forward to hearing from you

October 2, 2018 at 5:41 pm #6071
Tom
Keymaster
Good idea! Should be very easy to achieve right now with some CSS:
```
.wpsp-read-more {
    text-align: center;
    display: block;
}
```
October 3, 2018 at 2:42 am #6072

Andy
Participant

That works perfectly – thankyou

October 3, 2018 at 9:49 pm #6087

Tom
Keymaster

You’re welcome 🙂

January 8, 2019 at 4:36 pm #7075

Hui Boon
Participant

I was searching for this too. btw after centralizing the readmore button, is there a way to make the width of the button the same width as the image?
Similar to how this website https://packhacker.com/

appreciate it if there is also a way to control the height of each row like how packhacker is doing it.

thanks for the great app!

January 8, 2019 at 6:22 pm #7076
Tom
Keymaster
Hi there,

Try adding this as well:
```
.wpsp-read-more a {
    width: 100%;
    display: block;
    box-sizing: border-box;
}
```
January 9, 2019 at 6:41 am #7077

Hui Boon
Participant

thanks tom. i had tried previously on the width: 100% as well but did not work.

tried the above CSS code too..but the background colour did not extend to the edges.

View post on imgur.com

January 9, 2019 at 7:21 pm #7105

Tom
Keymaster

Any chance you can link me to that page?

January 10, 2019 at 6:56 am #7118

Hui Boon
Participant

https://26copy.com/

this is the site

January 10, 2019 at 8:12 am #7119

Hui Boon
Participant

finally managed to get it to stretch to the edges with the following css syntax.

.wp-show-posts-read-more{
width: 100%;
max-width: 800px;
box-sizing: border-box;
}

.wpsp-read-more {
text-align: center;
display: block;
}

however the “Read More: button does not always align to the bottom of the cells.

do take a look at the site and you will notice one of the boxes have an alignment issue…

January 10, 2019 at 7:20 pm #7124
Tom
Keymaster
Try adding this:
```
.wp-show-posts-inner {
    display: flex;
    flex-direction: column;
}

.wpsp-read-more {
    margin-top: auto;
}
```
January 11, 2019 at 7:33 am #7125

Hui Boon
Participant

it worked! thanks!

You run the most responsive support forum i have ever seen!

January 11, 2019 at 7:35 pm #7131

Tom
Keymaster

Glad I could help 🙂
Author

Posts

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

You must be logged in to reply to this topic.

[Resolved] Centralise the "Read More" Button