0

I'm struggling with my product tabs. I've that many tabs, that the tabs are wrapped to a new line. For this reason, I would like the breakpoint to change to an accordion from screen__m to screen__l.

I've tried many, many things already, I think it has to do with calling .lib-data-tabs() and .lib-data-accordion() in the correct media selector. But whatever I do, the default Magento breakpoint seems to 'win'.

The strange thing is when I open my site on an iPad it defaults to 'tabs view' in portrait mode. When I do so on Safari, and scale to viewport width < 768px and then back to iPad view, it seems to stay in accordion mode. Leading me to believe that 'both' tabs and accordion styles_l and styles_m are valid, but it simply is the styles_l version that is loaded last, and thus ending up with tabs instead of accordion.

It would seem so easy to fix the breakpoint to 1024 instead of 768, but I'm pulling my hairs out.

Can anyone help?

thx, Rene

0

Solved it with the following less code, sure it could be made more efficient though:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .product.data.items {
        .lib-data-accordion();
    }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .product.data.items {
        .lib-data-accordion();
    }
}
@media only screen and (max-width: @screen__m) {
    .product.data.items {
        .lib-data-accordion();
    }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .product.data.items {
        .lib-data-tabs();
    }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .product.data.items {
        .lib-data-tabs();
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.