Centering the "more' quick tab

decoproducts · Member · Jan 14, 2016 at 1:28 pm
Copy link

Add topic to favorites
Hi, I am hoping to center the “read more” quick tabs on my site. I am using the appetite them. Thanks!

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Jan 15, 2016 at 2:18 pm
Copy link
Howdy.

You can do that with a little bit of CSS magic. :) Try to add this to your custom CSS:
```
.hentry .entry-content .more-link-container {
    margin: auto;
    display: table;
}
```
I hope this helps you!
decoproducts · Member · Jan 15, 2016 at 2:28 pm
Copy link
Great that worked out perfect! However, it does bring up the question now about how to center the featured image titles (on front page) along with the images shown in a grid pattern as in posts and grid pattern featured pages. Thanks!
staff-jeanpierreac · Staff · Jan 15, 2016 at 10:23 pm
Copy link
:)

If you mean “SUPERIOR POWDER-COATING” and the other titles similar to that, you could center it, by adding this CSS code:
```
.homepage-widgets .front-page-block .entry-header {
    display: table;
    margin: 0 auto 60px auto;
}
```
However the little stripe just behind it is quite more difficult to center :/ Let me explain that. This line definition is in the following code:
```
.homepage-widgets .front-page-block .entry-header:after {
    content: "";
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100px;
    border-bottom: 1px solid #383a3b;
}
```
So, lets put an text-empty line (content:””) 100px wide after entry-header, but adding a 1px border to the bottom of this line. And this down border is the stripe.
- You could move the stripe by modifying left attribute. The bigger value, the more to the right. For instance you could try “left: 50px”
- You could change width or color of the line with border-bottom value. For instance, two times thicker and red could be “border-bottom: 2px solid #ff0000;”
- Want a longer stripe? Try “width: 300px;”
- My option? Maybe add “display:none” to remove it, having into account it cannot be centered and it will look great or odd depending on the title above :)
I hope it helps a little bit
timethief · Member · Jan 15, 2016 at 10:26 pm
Copy link
staff-jeanpierreac
[off-topic] I’m just wishing you a productive and prosperous new year featuring happiness and good health. :) [off-topic]
decoproducts · Member · Jan 18, 2016 at 2:45 pm
Copy link
Thanks again, that gives me complete control of what I was trying to manipulate!
staff-jeanpierreac · Staff · Jan 18, 2016 at 4:39 pm
Copy link
Glad to read that!! :)
decoproducts · Member · Jan 19, 2016 at 6:53 pm
Copy link
Well, after looking at the format on a smaller screen, I realized that the centering only took effect on the desktop version even though I have it checked to “include this CSS in mobile version” Is there a clear reason for this? Thanks!

No items found.