CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nethken
nethken

Reputation: 1082

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;
 }
 }

Upvotes: 18

Views: 21906

Answers (3)

user17900244
user17900244

Reputation: 11

Setting the viewport to make your website look good on all devices:

https://www.w3schools.com/tags/tag_meta.asp

Upvotes: 1

RonM
RonM

Reputation: 11

Worth mentioning...

The viewport also has to be set on any "parent" pages (if running in iframes), and master pages.

Upvotes: 1

Pbk1303
Pbk1303

Reputation: 3802

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

Upvotes: 63

Related Questions