Make Classic Feature List responsive

[eyedia]

Hi!

I have a classic feature list that I am having a hard time making responsive as I am using larger sized images.

Is it possible to have the icon display above the content for each item for smaller breakpoints?

I tried to assign some css to display both the graphic and content as block, with no floats and full width, but it doesn’t seam to work.

I know I can hide the list and create a work around, i’d just always prefer not too for SEO reasons and to just keep the layout as clean as possible.

Thank you mucho in advance

[Prasant]

Hello @reform,

Thanks for asking.

Can you please share website URL for us to take a closer look?

Thanks.

[eyedia]

Cartainly, attached below:

[Prasant]

Hello @reform,

Thanks for updating thread.

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-feature-box-graphic img.circle {
    width: 40%;
    float: left;
}

.x-feature-box-graphic.circle.x-feature-box-align-v-middle {
    width: 15%;
}

.x-feature-box-text {
    font-size: 12px;
    width: 30%;
}

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

Thanks.

[eyedia]

Perfect and thank you,

I just added a custom class to this list so it didn’t affect the others that were the images were small enough to stay responsive.

[Prasant]

You are most welcome. Fantastic, assigning custom class to an element is a great idea. It gives you the ability to style that particular element without affecting global and site wide CSS.

Have a good weekend.

Thanks.