Topic: media queries not working on android tablet

rangrager free asked 7 years ago

Hi, I just noticed that when you zoom in on an android tablet the media queries for the navbar does not collapse, it just piles up the nav-items on top of each other. This is only happening on android. Can you please check on this and provide a fix for us? Kind Regards

rangrager free answered 7 years ago

Hi, Thanks for your help. What I find strange is when I zoom in on my desktop the navbar collapses correctly. It could be only an issue on Samsung devices then. Kind Regards

Kamil Paciepnik free answered 7 years ago

Hi, I'm sorry but the screen size is too large for a tablet (1280x800) so bootstrap grid treats it as a laptop. Regards

rangrager free answered 7 years ago

Hi, I am having this issue when testing on Samsung galaxy tab 10.1. This is the theme I am currently using, Thanks for your assistance.

Kamil Paciepnik free answered 7 years ago

Hi, thank You for code, I can't recreate your problem. Can You write me what size you are using a tablet? I need also your skin file. Regards

rangrager free answered 7 years ago

Hi, thanks for your reply. Here is my code, i am using twig.

<nav class="navbar navbar-fixed-top z-depth-1">
    {% if this.environment == 'local' %}
        <div style="background-color: red; height: 2px; width: 100%;"></div>
    {% endif %}
    <!-- Collapse button-->
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#collapseEx2" aria-controls="#collapseEx2">
        <i class="fa fa-bars"></i>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <a href="{{ '/'|app }}" class="navbar-brand"><img src="{{'/site/HMS_LOGO.svg'|media}}" alt="" class="nav-logo"></a>
            <div class="col-lg-10">
                <!--Collapse content-->
                <div class="collapse navbar-toggleable-md" id="collapseEx2">
                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav navbar-nav pull-lg-right">
                                {% for item in staticMenu.menuItems %}
                                    <li class="nav-item {{ staticMenu.isActive ? 'active' : '' }}" style="max-height: 20px;">
                                        <a href="{{ item.url }}">{{ item.title }}</a>
                                {% endfor %}
                                <hr class="hidden-lg-up">
                                <a class="pull-right" data-toggle="collapse" href="#collapseSearch" aria-expanded="false" aria-controls="#collapseSearch">
                                    <img src="{{ 'site/search_s.png'|media }}" alt="" style="max-height: 20px;">

                        <div class="row">
                            <div class="col-md-12 pull-right">
                                <div class="collapse" id="collapseSearch">
                                    <form  class="form-inline search-box" action="{{ '/search' | app }}" method="get">
                                        <input name="q" type="text" placeholder="Search" autocomplete="off">
                                        <button class="btn btn-blue-grey btn-sm pull-right" type="submit">Search</button>
                <!--/.Collapse content-->


Kamil Paciepnik free answered 7 years ago

Hi, can You show me your code?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No