Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap is not working on mobile

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;
 }
 }
like image 498
nethken Avatar asked Apr 23 '16 17:04

nethken


People also ask

Does Bootstrap work on mobile?

Mobile devices Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.

Why Bootstrap code is not working?

These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.

Why is Bootstrap mobile first?

Bootstrap has become mobile first since Bootstrap 3. It means 'mobile first' styles can be found throughout the entire library instead of them in separate files. You need to add the viewport meta tag to the <head> element, to ensure proper rendering and touch zooming on mobile devices.

Can Bootstrap be used for app development?

Bootstrap is one of the best and most used HTML/CSS/JS front-end frameworks. Almost any web developer who has made a website or two has heard of this popular framework. It offers so many ready-made components and resources, Bootstrap can significantly speed up your application development.


1 Answers

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?.

like image 88
Pbk1303 Avatar answered Oct 12 '22 01:10

Pbk1303