[MattHollParticipant]

Hello.

I am having some issues with feature lists on mobile.

I have used this code below to try to get the image sized on mobile devices so that they are not big. The CSS seems to think of that image as a font. When I adjust that font size, it adjusts the image size.

@media only screen and (max-width: 480px) {
.x-feature-box-graphic-inner {
font-size: 70px !important;
}
}

I am having a problem with the connector lines now, though. They are not centered.

The first image is from my iPhone. The line is just a little off center. The second image is from within Cornerstone, showing that smallest screen to preview.

I would like those connector lines to be centered with the images no matter the device.

The page in question is here:

http://www.hrvatskohomebrewprvenstvo.beer/homebrew-supplies

I also use feature lists on other areas on the page and would like a global solution so those connector lines are centered on every device on every page for this site.

Any help is greatly appreciated.

[ThaiModerator]

Hi There,

Please update your custom CSS to this:

@media only screen and (max-width: 480px) {
    .x-feature-box-graphic-inner {
        font-size: 70px !important;
    }
    span.x-feature-box-connector {
        right: calc(100% - 70px) !important;
    }
}

Hope it helps 🙂

[MattHollParticipant]

Perfect! Thanks!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts