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
Related videos on Youtube
Author by
nethken
Updated on September 15, 2022Comments
-
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.
and this when i run on desktop it worked i don't know why not on mobile.
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 about 8 yearsHello sir! It works! :) Can you explain me what is viewport?
-
nethken about 8 yearsWhat is the use of css in viewport?
-
Pbk1303 about 8 yearsnethken: you mean @viewport in css?.
-
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 over 2 yearsThis might work better as a comment on the accepted answer or editing the existing answer to include this note
-
99tharun over 2 yearsThis 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 over 2 yearsPlease, leave your note as comment of original answer
-
code over 2 yearsWhile 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