Magento2: Responsive not working with Device under 480px

Created on 12 Apr 2016  ·  8Comments  ·  Source: magento/magento2

Hi Everyone.
I'm tried made Magento responsive for a device under 320 but it was not working.
here the my code:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 
  Code right here for under 320px; @screen__xxs: 320px;
}

Please let me know how to input code to only this device. I'm tried many time but it not success.

Many Thanks

Best Regards,
Ziven.

Most helpful comment

I've added:
@media all and (min-width: @screen__xxs) {
.media-width('min', @screen__xxs);
}

@media all and (min-width: @screen__xs) {
.media-width('min', @screen__xs);
}

on:
line 50

to:
lib/web/css/source/lib/_responsive.less (needs to be copied to yout own theme)

And now i'm able to use @screen__xxs and @screen__xs with the "min" statement.

All 8 comments

Hi, @zivendesign!

Thank you for reporting this issue.
Internal ticket MAGETWO-51886. While the fix is delivered, you can do a quick-fix for your theme by adding 320px breakpoint to your theme

@zivendesign Internal ticket MAGETWO-51886 is closed and delivered to mainline. Please let us know if you still have an issue.

Hi @MomotenkoNatalia ,
Here my code and it not working in the breakpoint under 480px with Magento Breakpoint default

//
//  Mobile vertical
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
    .minicart-wrapper .block-minicart {
        padding-top: 10px;
    }
}

//
//  Mobile
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .minicart-wrapper .block-minicart {
        padding-top: 0px;
    }
}

The padding still: padding-top: 0px when i switch to device under 480px.
Please let me know how to resolve it.

Best Regards,
Ziven.

@zanilee,
I'm still having problem about the breakpoint you said still not working. I'm tried much time but still not the success.
Please let me know how to resolve or have some sample working fine.

Many Thanks.

Best Regards,
Ziven.

hi there,
in version 2.1 this bug is present? Is this not fixed?

Yes @andidhouse.
It Still and No one tells me the Solution and Reply about it.
Best Regards,
Ziven.

@MomotenkoNatalia

Why is this issue closed if it is not fixed in a newer release.
It is now over 3.5 month... Can someone pls point out a workaround or when this issue will be fixed?

Thanks!

I've added:
@media all and (min-width: @screen__xxs) {
.media-width('min', @screen__xxs);
}

@media all and (min-width: @screen__xs) {
.media-width('min', @screen__xs);
}

on:
line 50

to:
lib/web/css/source/lib/_responsive.less (needs to be copied to yout own theme)

And now i'm able to use @screen__xxs and @screen__xs with the "min" statement.

Was this page helpful?
0 / 5 - 0 ratings