how to make css media query to work on mobile phones

user_14884682 0
Viewed 580

i am trying to make .data container display flex in screens less than 768px.if screen is more than that width it will be displayed as grid.

so,while checking in chrome developer settings without "Toggle device toolbar" option it's working as intended but if i use "Toggle device toolbar" option,it's displaying grid layout even if screen width is less than 768px.i also checked on mobile phone it's not working as it should.

if you want to see app ,is deployed at app

if you want to look at whole code is at repo

with Toggle device tool bar

without Toggle device tool bar and css is working as intended only in desktop browser not in mobile

below is css and pug markup

css

.data{
    display: flex;
    flex-direction: column;
    padding: 10px;
    
    }

@media only screen and (min-width: 768px ) {

        .data{
            text-align: justify;
            display: grid;
            gap: 20px;
            padding: 10px;
            
            grid-template-columns: repeat(3,1fr);
            grid-template-areas: "heading heading notification";
        }
        .heading{
            grid-area: heading;
            text-align: justify;
        }
        .notification{grid-area: notification;}
        
        
    
}

pug file

extends base 

block content 
 .main
   .home 
      .content 
        h1.content WELCOME TO WINROBOT 

   .data
      .heading
        h2 Heading 
        p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi error, eius a asperiores repellat ex sapiente sit, ut explicabo cupiditate eveniet esse facere corporis facilis excepturi ipsum voluptates nesciunt debitis.Eveniet sit at iure molestias, ipsum, dolorum doloremque delectus reprehenderit alias quae quis asperiores soluta, voluptates quos omnis? Qui quasi ducimus inventore pariatur amet perspiciatis omnis ratione velit est hic.Doloremque accusantium sit vero quasi a adipisci, asperiores officia earum delectus reiciendis harum quae aspernatur itaque non mollitia iste sapiente eius totam, quibusdam optio, eum repellendus minima velit. Nobis, fugit?Consequuntur, eos velit. Delectus fuga rem assumenda eum laborum deleniti adipisci, eveniet voluptatibus magnam quaerat odit recusandae amet. Magni doloribus architecto ipsum ut beatae animi aliquid culpa natus molestias molestiae!Iusto totam inventore harum, magni a consequatur accusamus ipsam vero numquam rerum autem impedit quia ex provident perferendis voluptates, maxime quaerat, aliquam qui ullam possimus voluptate. Voluptas aut quaerat iste!Repellat aliquid veritatis, dolorum ipsam magni dolores dolor a, placeat odio amet obcaecati est hic omnis nesciunt sunt ad accusantium nulla. Nisi laboriosam consequuntur nulla, sint doloremque ex minima pariatur.Tempora dolorem tenetur quam repellendus, magni fuga voluptatum perspiciatis officiis ea iure quis exercitationem incidunt obcaecati deleniti quo sed recusandae provident doloremque id dicta inventore. Magnam cupiditate ea facilis placeat.Explicabo alias optio earum inventore quo impedit quis, consectetur nisi dolor? Hic accusantium consequatur rem vel cumque recusandae ratione illum omnis, aut tenetur iure quo dolorum nisi nesciunt itaque numquam?Quasi sunt cum libero veritatis, perspiciatis voluptates quis similique suscipit eligendi adipisci magnam id expedita ratione aperiam, velit unde temporibus? Vel obcaecati quae porro, ratione officia veritatis eius modi dolorum?Doloremque rem nisi fugit corporis eos libero dolorem sapiente aperiam maiores earum soluta facilis explicabo reiciendis expedita omnis iste, eum tenetur obcaecati voluptas odit optio perspiciatis tempore. Exercitationem, illo nesciunt!
      .notifications 
        h2 Notifications
        if (user && user.role === 'admin')
         button.btn.btnAddNotification new notification
        .note 
          h3.ntitle title 
          p.ndate Date
          p.ncontent notification content
        if (user && user.role === 'admin')
          button.btn.btnDeleteNotification Remove

resultent html from browser


<!DOCTYPE html >
<html>
    <head>
          <title>Winrobot | Home</title>
          <link rel="shortcut icon" type="image/png" href="/img/favicon.png"/>
          <link rel="stylesheet" href="/css/styles.css"/>
    </head>
    <body>
        <nav class="navbar">
            <div class="brand">
                <a href="/">
                    <div class="d-flex"><img class="logo" src="/img/logo.jpg" alt="Logo"/>
                        <p class="brand-name" style="margin:auto 0;">WINROBOT </p>
                    </div>
                </a>
            </div>
            <div class="nav-content">
                <ul class="navbar-nav">
                    <li class="navbar-item"> <a class="navbar-link" href="/">Home </a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/courses">Courses </a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/about">About</a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/login">Login </a></li>
                    <li class="navbar-item"> <a class="navbar-link" href="/signup">Signup </a></li>
                </ul>
                <button class="collapsible"> </button>
            </div>
        </nav>
        <div class="main">
           <div class="home">
                <div class="content">
                     <h1 class="content">WELCOME TO WINROBOT </h1>
                </div>
            </div>
            <div class="data">
                <div class="heading">
                    <h2>Heading </h2>
                    <p>Lorem, ipsum dolor sit amet consectetur, illo nesciunt!</p>
                </div>
                <div class="notifications">
                     <h2>Notifications</h2>
                     <div class="note">
                          <h3 class="ntitle">title </h3>
                          <p class="ndate">Date</p>
                          <p class="ncontent">notification content</p>
                     </div>
                </div>
            </div>
        </div>
            <footer class="footer">
                <div class="copy">
                    <div class="links">
                        <h4>All rights reserve to &copy; winrobot </h4>
                    </div>
                </div>
                <div class="social">
                    <h3>Social Media </h3>
                    <div class="links">
                        <a href="#" target="_blank">facebook</a> |  <a href="#" target="_blank">twitter </a>
                    </div>
                </div>
                <div class="contact">
                    <h3>Contact</h3>
                    <div class="links">
                         <a href="tel:+918463914092">Call Us</a> | <a href="mailto:winrobot@gmail.com" target="_blank">Send Email </a>
                    </div>
                </div>
            </footer>
            <script src="/js/bundle.js"> </script>
    </body>
</html>
pug media-queries css html
5 Answers

I did not add meta(name="viewport", content="width=device-width, initial-scale=1.0") to my base template. That's why it was acting like that.

user_148846820

Where are you writing the style that should be applied on mobiles phones?

Try to use max-width instead of min-width in the media query.

user_145102260

For Responsive web design, Mobile first is best reliable. So mostly all developers use min-width media query, even Most Popular Responsive CSS Framework "Bootstrap" recommend to use min-width wise media query...

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

For More Info Visit Bootstrap Site I hope this one helps to youo

user_143449590

Your CSS seems to follow the mobile-first methodology, which means all the CSS that you write outside of the media queries IS the styling that will be seen on phones and other small screens.

This means you should write styling for screens from 0 to e.g. 768px width ABOVE your first media query.

This means that you should move the CSS rules for .data (that you currently have inside of a media query) outside of any media queries. This is mobile-first.

Then comes your media query and kicks in from 768px and upwards with @media (min-width: 768px) {...;}. Here you should add styling for wider and wider viewports, for example one for 960px and one for 1200px, etc. But only if you need to.

The other way around, you have to start with the bigger screens (desktop-first) and go the other way, using @media (max-width: 768px) etc. to target only screens less than 768px wide with your media query. In any case you tweak or override your initial CSS in the media queries. For this method too it's often necessary to make adjustments with more than one media query, so you may target phones as small 300-400px, for example with @media (max-width: 380px).

user_98824860

Try implementing responsive layout using breakpoints. You can check out this page for Breakpoints for responsive web page.

user_117790120
Related