Bootstrap is not working on mobile

18,074

You are probably missing the viewport meta tag in the html head:

Viewport is the user's visible area of a web page. Using width=device-width you need to set the width to device width you are viewing in like mobile or tablet or desktop.

<meta name="viewport" content="width=device-width, initial-scale=1">

Refer this link : Viewport meta tag

What is Viewport?.

Share:
18,074

Related videos on Youtube

nethken
Author by

nethken

Updated on September 15, 2022

Comments

  • nethken
    nethken over 1 year

    i tried to run my design to the developer tools on chrome as a mobile but the bootstrap is not working. Can someone give me ideas why the bootstrap is not working on mobile?

    here is the picture when i tried to run on mobile. enter image description here

    and this when i run on desktop it worked i don't know why not on mobile.

    enter image description here

    here is my media queries.

     @media (max-width: 768px) {
    .img-responsive{
     width: 300px;
    height:50px;
    padding-left:50px;
    }
    }
    @media (max-width: 376px) {
    .img-responsive{
     width: 220px;
     height:50px;
     padding-left: 20px;
    }
    }
    @media (max-width: 286px) {
    .img-responsive{
     width: 180px;
     height:50px;
     padding-left: 5px;
     }
    .footer{
     height: auto;
     }
     h4{
     padding-top: 50px;
     padding-left: 20px;
     }
     }
    
  • nethken
    nethken about 8 years
    Hello sir! It works! :) Can you explain me what is viewport?
  • nethken
    nethken about 8 years
    What is the use of css in viewport?
  • Pbk1303
    Pbk1303 about 8 years
    nethken: you mean @viewport in css?.
  • Pbk1303
    Pbk1303 over 4 years
    @nethken: viewport is user's visible area of the page/ area of the window in which a web content can be seen
  • Jonathan Southern
    Jonathan Southern over 2 years
    This might work better as a comment on the accepted answer or editing the existing answer to include this note
  • 99tharun
    99tharun over 2 years
    This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
  • Oro
    Oro over 2 years
    Please, leave your note as comment of original answer
  • code
    code over 2 years
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review