I am new developer for bootstrap. I made a product but if I collapse automatically from right side or left side of chrome it works responsive like I want. But when i choose from inspect and giving an absolute width it does not look like other one. I added two photo to describe clearly. Thank you for your effort everyone.
You have to add a meta tag to get responsive in chrome responsive mode
This is the meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I just create grid based on mobile first (old style, not using flex). When I try my result, the width of element when on mobile is not work, it overwrite width from min-width: 768px. Here is the image
I've tested it on other element, and it's not have problem. Check out this image
why it's have different result, I'm using same css. Please help me :)
I guess you have missed meta tag in head tag which specifically tells browser to take media queries css :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I have a requirement from my client that I have to show desktop version on mobile. He told me that he wanted the website responsive so I used bootstrap and now he wants to show desktop view on mobile.
I went over many solutions on the internet, the only one that seems to be closely working for my case is setting the viewport tag.
Here's the code
<meta name="viewport" content="width=1024">
Now the thing is it worked for the most part but still there are some areas where it is still following the responsive view. I also tried with content="width=1200". It worked but there was a small horizontal scroll on the website or in some cases some part from the end is left blank!
Here's the live demo if anyone wants to see it:
http://nextcrawl.co/website/doubledouble/
You already seem to have the proper meta view settings, what's left is to give your .container class a set width:
.container {
width: 1024px;
}
And wrap your header nav and other elements into a .container div as well.
Try this
<meta name="viewport" content="width=device-width, initial-scale=1">
I just built a website in which styles and layouts are responsive when adjusting browser window size, but when I open responsive inspect, it does not respond-- columns don't break at all and the window simply resizes into a percentage of the site...
Why would this happen?
Please make sure that you have Responsive Meta Tag inside your Head tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
I've a page with a sidebar setup with bootstrap. When I reduce the width of the page in my browser, the sidebar goes from FULL -> COLLAPSED -> TOPBAR (meant for small screens like phones) as the width decreased
But strangely when I access this in my phone, I only see the COLLAPSED version of the sidebar whereas on that small a screen I should be seeing the TOPBAR.
I can't understand how to debug this since it works correctly in my PCs browser on reducing the width!
Any wise CSS heads here who might know what the problem might be? You can check out the sample page here.
Please add below meta tag to recognizance device without this tag this responsive design not work in mobile : Add between <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">