Why Toggle Button is not visible on small device?

[petrogromovo]

Hello,
I have problem with Toggle Button, which must be visible on small and extrasmall devices only to show left aside menu.
This left aside menu is hidden on bigget devices.
Could you please to open page
http://demo2.nilov-sergey-demo-apps.tk/admin/warehouses
It is under credentials admin@demo.com 111111
It has button definition :

            <div class="d-sm-block d-md-none d-lg-none d-xl-none ">
                <nav class="navbar navbar-expand-lg navbar-light bg-light   ">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse1" class="btn btn-info">
                            <i class="fa fa-align-left" style="color: white"></i>
                            <span>Toggle Sidebar1</span>
                        </button>
                    </div>
                </nav>
            </div>

I expected that with classes defined in first row, this button would be visible only on small and extrasmall devices,
But In my Chrome Browser ( Chromium Version 71.0.3578.98 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit) )
I do not see this button on small device: https://imgur.com/a/vaIF1ov
Is selected ipad small device ? Or is it problem of my browser?

Why error and how to fix it?

Thanks!

[PaulOB]

The ipad is 768px wide and at 768px wide and above you hide the menu here.

@media (min-width: 768px) {
.d-md-none {display: none !important;}
}

You would need to change it to 769px:

@media (min-width: 769px) {
.d-md-none {display: none !important;}
}

That’s the danger of chasing devices. You are better off tailoring the media to the design’s requirements not some imaginary device.

[petrogromovo]

Thank you for your feedback!
But I am not sure tat I have understood you.

That is php/laravel/bootstrap app and it has template, used by all pages and it has :

    {{--iPhone portrait 320 x 480 --}}
    <link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_xs_320.css') }}" media="only screen and (min-width: 320px) and (max-width: 479px)
" />

    {{--iPhone landscape 480 x 320--}}
    <link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_xs_480.css') }}" media="only screen and (min-width: 480px)  and (max-width: 599px) " />

    {{--Kindle portrait 600 x 1024--}}
    <link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_xs_600.css') }}" media="only screen and (min-width: 600px)  and (max-width: 767px) " />

    {{--iPad portrait 768 x 1024--}}
    <link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_sm.css') }}" media="only screen and (min-width: 768px)  and (max-width: 1023px) " />

    {{--iPad landscape 1024 x 768--}}
    <link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_md.css') }}" media="only screen and (min-width: 1024px) and (max-width: 1279px) " />

    {{--Macbook 1280 x 800--}}
    <link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_lg.css') }}" media="only screen and (min-width: 1280px)" />
    <!-- Scripts -->

Do you mean that some size resttrictions are wrong?

[PaulOB]

@petrogromovo

Do you mean that some size resttrictions are wrong?

No I’m saying that 768px - 1023px is the ipad in portrait and if you put your display:none rule in those styles then it will be hidden on the ipad.

.d-md-none {display: none !important;}

If you want the element to be visible in ipad portrait then stick the display:none in the next rule up in your sequence.

<!----iPad landscape 1024 x 768---->
<link rel="stylesheet" type="text/css" href="{{ url('css/'.$current_admin_template.'/style_md.css') }}" media="only screen and (min-width: 1024px) and (max-width: 1279px) " />

[Edit]

Actually you are changing things in odd places so you would need this code to fix it.

@media (max-width: 768px) {
.d-md-none {display: block !important;}
}
@media (min-width: 769px) {
.d-md-none {display: none !important;}
}