Classic Feature Box not responsive on mobile

[Dw1ght]

Hey! I’m working on placing a few feature boxes, each with its own image, title and text, and the way I’m doing it is 1st one on the left, second on the right side, third on left, fourth on right, and so on.

While this looks amazing on desktop, on mobile, however, I’d wish to have them centered, one under another, since right now, they’re acting the same way on mobile as they do on desktop, with each of them being left or right, and thus not very enjoyable.

Could you please provide me with the Custom CSS for it? Thank you!

[jade]

Hi there,

Please add this code in the Global CSS:

.x-feature-box {
    flex-direction: column;
}

.x-feature-box .x-feature-box-graphic {
    order: 1;
    text-align: center;
}

.x-feature-box-graphic-inner {
    width: 100%;
}

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

.x-feature-box .x-feature-box-content {
    text-align: left;
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.

[Dw1ght]

Heya and thank you!

Since I wanted this only for mobile (and nothing to be changed on Desktop), I’ve added the @media (max-width: 767px) as such:

@media (max-width: 767px) {
	.x-feature-box {
    flex-direction: column;
}

.x-feature-box .x-feature-box-graphic {
    order: 1;
    text-align: center;
}

.x-feature-box-graphic-inner {
    width: 100%;
}

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

.x-feature-box .x-feature-box-content {
    text-align: left;
}
}

Tested it on mobile and it’s perfect, thank you, just wanted to make sure the addition I made is good.

[christian]

You’re welcome. Please just note that providing custom CSS is not a part of our support service. In case you experience issues with the custom code and would need further enhancements, you would need to consult with a third party developer. Or, learn from the links @Jade provided.

Thanks.