How can I center feature row, while keeping them side by side?

[Andre601]

I would like to display feature rows centered on a site, but the issue with using {% include feature_row id="features" type="center" %} here is, that they are all in the center of the page and displayed below each other, which is not what I want here.

I basically want the display it has for left, but with the full feature row itself being centered.
How can I do this properly?

[Andre601]

Anyone?

[ryan-p-randall]

I'm having a hard time understanding what you have in mind, based just on a written description.

Maybe referring directly to the splash page examples will help?

Are you hoping to have:

• A: Multiple items in a horizontal row, like in the Splash Page's top row, but with the text centered in each placeholder?
• B: A single item in a horizontal row with the image all the way to the left, like in the Splash Page's Placeholder Image Left Aligned example, but with the text centered to the right of that image?
• C: Something else not described here?

If it's something else, can you include an image or a link that shows what you have in mind?

[Andre601]

Case A would be my goal here.

[ryan-p-randall]

So is this what you have in mind?

In Firefox's Developer Tools, I added text-align: center; to the <div class="archive__item-body"> level to mock this up for you.

So if you want that to happen in all your feature rows, I think you'd want to customize your site's CSS to read something like:

.feature__item .archive__item-body {
text-align: center;
}

Hopefully that helps?

[Andre601]

Yeah, this doesn't work. Probably due to how (S)CSS overrides work in Jekyll, which I still don't understand to this day...

[Andre601]

Okay, I got it to work by importing stuff... Bit annoying but that's jekyll for ya.