Reputation: 1082
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;
}
}
Upvotes: 18
Views: 21906
Reputation: 11
Setting the viewport to make your website look good on all devices:
https://www.w3schools.com/tags/tag_meta.asp
Upvotes: 1
Reputation: 11
Worth mentioning...
The viewport also has to be set on any "parent" pages (if running in iframes), and master pages.
Upvotes: 1
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
Upvotes: 63