Archived topic
Read more button does not align
4 replies · Started by Zoltan on March 7, 2022
Hello,
I have been trying to align the "READ MORE" buttons under my archive posts.
The problem is that the "READ MORE" buttons are not center-aligned on desktop, and on a mobile, the button looks even more off, and is not centered.
The way I would like this to look on a mobile device is the same as the buttons @: https://greatist.com/move
On desktop, I would like to center the same "READ MORE" button, below my excerpt.
I used the following CSS from David, but slightly modified it but I could not make it center-align: https://generatepress.com/forums/topic/align-the-read-more-button/
Kind regards,
Zoltan
Hi Zoltan,
Here is a CSS you may try:
.content-area .site-main .inside-article .entry-summary > p > a {
left: 50%;
transform: translate(-50% ,0);
}Through this CSS, I moved the button 50% from the left, then moved it back 50% of its width to make it centered.
Kindly let us know how it goes. :)
Hi @Fernando,
Thank you! I just added your CSS.
Now the READ MORE button shifted to the left significantly to a left extreme, both on mobile and desktop.
On mobile half of the button is now off the screen.
Can you please check?
Thanks a lot.:)
Zoltan
Hi @Fernando,
I have added one more line to your CSS:
position: relative;
And now the button is center-aligned on mobile and on desktop.
Thanks again for the quick help!
Zoltan
You’re welcome Zoltan! Glad to be of assistance. Feel free to reach out anytime if you’ll need assistance with anything else. :)
