Place feature list item center of column

Support
#1

Hi @friech,

I read your other support article and managed to move the feature list items to the center, but the icons / graphics and the button is unchanged. How can I place feature list items and button at the center of column along with the icon/ graphics?

Here’s the custom CSS I compiled and used:
.custom-feature-list h4.x-feature-box-title { /This selector affects the title of the feature list item/
color: ; /This change font color/
font-size: 14px; /* This change font size*/
width: inherit;
margin-left: auto;
margin-right: auto;
}

Thank you very much

#2

Hi @mercury913,

Thanks for writing in.

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

@nico

Hi, my URL is www.fylgi.is

#4

Hi mercury913,

Please edit this page with Cornerstone, then add this CSS snippet in the CSS section:

.x-feature-box.left-text .x-feature-box-graphic {
    position:absolute;
    margin-top:-5px;
}

And this JS snippet in the JS section:

jQuery( document ).ready(function() {
	jQuery("ul.x-feature-list .x-feature-box").each(function () {
		var width = jQuery(this).find('.x-feature-box-title').width();
		var cont_width = jQuery(this).find('.x-feature-box-content').width()
		jQuery(this).find('.x-feature-box-graphic').css('margin-left',((cont_width-20)-width)/2);
	});
});

This should do the trick.
Thanks.

#5

This error pop up when I run the JS

#6

Hi again,

Please remove the previous customization (CSS and JS) and just add the following CSS code in your Cornerstone’s CSS section:

.x-feature-box-graphic, .x-feature-box-content {
    display: inline-block !important;
    flex: none !important;
    vertical-align: middle;
}
.x-feature-list .x-feature-box {
    text-align: center !important;
    display: inline-block !important;
}
.x-feature-list {
    text-align: center !important;
}

Let us know how this goes!

#7

Thank you @Nabeel, it did solve the problem of making everything in the center.

However, can I have it responsive? As in possible to shrink icon and font size to fit the column width? I am fine having the text wrapped in 2 lines, but not the icon and the text separated like shown in the picture.

Thank you very much

#8

Hello @mercury913,

Thanks for asking. :slight_smile:

Please try out following CSS and let us know how it goes:

.x-feature-box-title {
    font-size: 16px;
}

Thanks.

#9

Hi,

It doesn’t work. I wanted the list font size to be responsive to the column width with the icon next to it.

This CSS that you suggested is only changing the font size of the title of the feature box - not the list.

Thank you again for helping.

#10

Hi mercury913,

I believe that at least one of the CSS/JS snippets mentioned on this thread should work responsively, to let me check why it’s not working, please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

#11

Hi @mercury913

Thanks for providing the login credentials, I confirm it works, but I’m pretty sure the user account isn’t admin, could you please make sure it has admin privileges so we can access the theme options?

Thanks.

#12

Ahh ok. Sorry, I will fix that.

#13

Hey There,

Please remove this code:

.x-feature-box-graphic, .x-feature-box-content {
    display: inline-block !important;
    flex: none !important;
    vertical-align: middle;
}
.x-feature-list .x-feature-box {
    text-align: center !important;
    display: inline-block !important;
}
.x-feature-list {
    text-align: center !important;
}

Have it updated and use this instead:

.x-feature-box-graphic, .x-feature-box-content {
    display: inline-block !important;
    flex: none !important;
    vertical-align: middle;
}
.x-feature-list .x-feature-box {
    text-align: center !important;
    display: inline-block !important;
}
.x-feature-box-content {
    width: 220px;
}
.x-feature-list {
    text-align: center !important;
}

Hope this helps.

#14

Thank you, it now works for the feature list. But also to the icons for the feature box on top of the list. I see that in your screenshot, it doesn’t apply do that. I am not sure what I am doing wrong?

#15

Hi,

First of all, I created a backup of your custom CSS codes on that page which you can find here.

I can see you have added // in front of some lines over there, I assume you wanted to comment our those lines, but this isn’t the correct way to comment out CSS codes, instead you should wrap the code you want to comment out between /* code here */, I have corrected that now.

Then I reapplied the JS/CSS solution I mentioned here, could you please recheck your page and let me know if this is what you want?

Thanks.

#16

Ahh ok. Thank you. Yes, this is what I want.

1 Like
#17