Classis Feature list lost it's responsivness

[eyedia]

Hi I was helped with this before and i’m not sure why it isn’t working now?

Here was the post that the solution was suggested.

Make Classic Feature List responsive

You can see on this page:

Hybrid Pharm Pharmacy & Compounding Services

The issues:

• text is expanding off of the page at some breakpoints
• The titles stay on one line causing it to also go off screen
• The icons at small viewpoint are far to the left of the text
  https://hybridpharm.com/ottawa-pharmacy-and-compounding/

Here is my code:
/* Make feature classic list responsive */
@media only screen and (max-width: 600px) {
.x-feature-list .x-feature-box-graphic img.circle {
width: 40%;
float: left;
}

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

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

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

.x-feature-list .x-feature-box-connector {
right: calc(100% - 80px) !important;
}
}

/* MOBILE */ @media only screen and (max-width: 767px) {

.circle-service-columns {
padding: 0 !important;
}

.circle-service-columns p {
padding-right: 5% !important;
padding-left: 5%
}
}

[mldarshana]

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Theme Options > Global CSS area and see if that helps.

.x-feature-list {
    max-width: 100% !important;
}

Hope that helps.

[eyedia]

Hi!

So that helped with the text expanding out of the page, but I still had it sizing strange below 600px
I just removed what I was given, and it looks fine. So not sure what changed between the time I was given the code that did solve that issue and now where the code was causing an issue.

Either way it is fixed.

I do think on mobile the list doesn’t look great.

Is there a way to stack the icon above the content? If not no owrries, I can just add a mobile variation on that section and hide the desktop if needed.

Thank you

[jade]

Hi there,

Please try this code:

@media(max-width: 480px) {
    .x-feature-box-connector {
        display: none;
    }

    .x-feature-box-graphic,
    .x-feature-list .x-feature-box {
        display: block;
    }

    .x-feature-box-graphic-inner {
        display: inline;
        width: auto;
    }

    .x-feature-box-graphic-outer {
        margin-right: 0 !important;
        padding: 0 70px;
    }

    .x-feature-box-title, .x-feature-box-text {
        text-align:  center;
    }
}

Hope this helps.

[eyedia]

Perfect and thank you! You guys are the greatest and why i’ll never (willingly) use another theme

[mldarshana]

Glad we were able to help