How can i align the Read More button?

7 posts from 3 voices

• Started 1 year ago by haritos
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   haritos
   Member

   Hello! I want to align the Read More button in the center under the text. How can i do this? http://www.e-win.gr

   Posted 1 year ago #
2. 

   Chris Beard
   

   Hi,

   It seems your read more button is aligned in the center, did you solve it?

   Posted 1 year ago #
3. 

   haritos
   Member

   No! I want to align it in the center under the text...To be aligned with the text not for the whole content!

   Posted 1 year ago #
4. 

   Dude
   Dude

   Hey,
   because of the html structure it's not possible to center align the button under the text. You can align it manually but because you're using different sized images the button won't align right for all other items. However if you want to change the alignment open up style.css and search for:
   

   .more-link, .more-link:hover{
   line-height: 32px;
   margin: 0 auto 20px;
   }

   Change "auto" to a px value like 40px. This will push the button to the left or right. You can adjust the value so that it looks great for the first post, however the second post won't display the button right.

   Posted 1 year ago #
5. 

   haritos
   Member

   I will check it! The second post is just a demo..i am looking what post is nicer so i will decide the post structure..Thank you!

   Posted 1 year ago #
6. 

   haritos
   Member

   I have this code in my style.css :

   .more-link, .more-link:hover{
   line-height: 32px;
   margin: 0px auto 20px;
   }

   .more-link, .more-link:hover, .button{
   width:105px;
   text-decoration: none;
   display:block;
   font-size:12px;
   font-weight:bold;
   text-align: center;
   margin-top:20px;
   margin: 0px auto 20px;
   }

   Which of the two do i have to change?

   Posted 1 year ago #
7. 

   Dude
   Dude

   I'd use the first code block and modify it to:
   

   .more-link, .more-link:hover{
   line-height: 32px;
   margin: 0px auto 20px !important;
   }

   Now replace auto with any px value you like.

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.