[adriansoarsParticipant]

Hi – see the “What to do” section @ http://www.perfectart.com. The feature list has two columns. But you can see the parent is a 2/3 + 1/3, but the two column feature list is inside the 2/3 (perhaps inside another row)?

How is this achieved with Cornerstone?

Thanks

[RahulModerator]

Hey There,
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.
Thanks.

[LelyModerator]

Hi There,

Upon checking, the code is not a Cornerstone feature list. It is custom coded. See attached screenshot.
To achieve that in Cornerstone, you may use Column Shortcode, Icon, Custom Headline and Text element inside a Raw Content element.
http://demo.theme.co/integrity-1/shortcodes/columns/
http://demo.theme.co/integrity-1/shortcodes/icons/
http://demo.theme.co/integrity-1/shortcodes/custom-headline/

Hope this helps.

[adriansoarsParticipant]

Hi – yes, I know the page @ perfectart.com was not created in CornerStone.. I am now trying to create it in CornerStone here: http://e20.c9f.myftpupload.com

Is there any way to do this in Cornerstone without using raw content?

[JoaoModerator]

HI There,

Do the following

Devide your Section and 2/3 + 1/3 Columns.

On your left column 2/3 Put two feature lists on top of each other.

On the top feature list Style Box you will add the code: float: left;

On the second feature list you will add float: right;

They will be a bit far a part, so you can add some 5% margin right and left on your column where the feature list are placed.

Please see img attached.

Hope that helps

Joao

[adriansoarsParticipant]

Thanks – almost there: http://e20.c9f.myftpupload.com/

Where do I alter the margin settings?
Also, when I reduce the window size say to 980px – 1199 px, the second list is indented from the left. Any thoughts?

Thanks

[RadModerator]

Hi there,

Because it’s floating and non-responsive. Would you like to make it responsive to a specific device? Please remove this style from your feature list style input.

float: right;

And remove this from feature list item style input too

max-width: 550px;

Then add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media (min-width: 980px) {
.x-feature-list.two-columns .x-feature-box {
    float: left;
    width: 50%;
}
}

Then simply add two-columns to your feature element’s class input.

Thanks!

[adriansoarsParticipant]

This is excellent – thanks!

[John EzraMember]

You’re most welcome!

[Author]

Posts