I'm trying to disable bootstrap's responsiveness on my main page for my website, but the instructions are completely alien to me. Could someone could just explain what they mean and what I have to do to the code.
The instructions for disabling Bootstrap's responsiveness are here:
http://getbootstrap.com/getting-started/#disable-responsive
You need to remove the following `meta tag from the head of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In your css file add:
.container {
width: 970px !important;
}
Remove the collapse navbar classes from your navbar
In grid system just use the .col-xs- class
Bootstrap documentation itself explains you how to disable responsive features but it's not so clear.
Here is a post that explains that step by step:
http://coderpills.wordpress.com/2014/05/11/how-to-use-twitter-bootstrap-3-for-non-responsive-site/
Related
I tried the html meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But it didn't work.
Please any tell me the answer
How I can made my website responsive
To make your website responsive you can do it the hard way manually by setting the width of any page-width element to 100%, such as the main <div> and then avoid appearance of any horizontal scroll bar. Or simply by using a responsive library such as Bootstrap 4.0.
To use bootstrap library put the following line in the <head> section:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
And then in the body put your pages inside:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Your Page HTML Here -->
</div>
</div>
</div>
</body>
For more information and to learn Bootstrap 4 and understand how it works, please refer their official website:
https://getbootstrap.com/docs/4.0/getting-started/introduction/
You'll find other responsive components such as: menus, tabs, buttons, form controls, and many more things. Also you'll learn how to hide and show elements based on the screen width for major screen widths and also popups "called modals" and other comprehensive elements to use in your website to stay responsive.
Try this:
<meta name="viewport" content="user-scalable=yes">
You can do this with more than a way but in case you are using HTML and CSS only you can do it using the CSS media query.
You can learn more about it from here: Responsive Web Design - Media Queries
You will have to use the media query in CSS to do so.
Like so:
#media only screen and (min-width:360px){
}
Here is a YouTube video on Responsive Web design that is really easy to follow: Responsive Web Design by mmtuts
In Bootstrap 4 change log I see
Non-responsive usage of Bootstrap is no longer supported.
What should that mean? How do I know when some usage is (non-)responsive?
You can disable the responsive in Bootstrap 3 by the following steps,
and this is the non-responsive usage you mentioned.
Source:
Omit the viewport <meta> mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
Here's the official example.
In Bootstrap 4, these might break the styles since the Non-responsive usage is no longer supported.
You can disable responsiveness of bootstrap by removing the following meta tag from website page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the link : Disabling responsiveness
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">
This is what it looks like on my tablet:
When I inspect remotely in chrome, I see that the body width(600px) is not that of the document, being set by a div with a min-width:1000px;.
How can i get the bootstrap navbar to fill the full width?
You can access the website suphearst.ca
the solution is too simple
just add min-width:1000px; to body
It sounds to me that you are missing the viewport meta tag in your html document. It will fix your problem and render the document after the device scale.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can read more about it here
I tried following the link below.
http://www.pardot.com/faqs/html-css/optimizing-forms-on-mobile-devices/
It says I can use the same CSS3 media queries from my Twitter Boostrap CSS/LESS stylesheets to Pardot's form stylesheets, under Layout template.
But when I attempted to write this media query up inside Layout Template.
#media (max-width: 480px) {
// some CSS code here from Boostrap
}
And then viewed it on my browser. It doesn't work!
It's as if it could not detect my Bootstrap CSS3 stylesheets when the browser is rescaled on mobile devices due to its Pardot's internal iframe's setup.
Can somebody point out is the mobile responsive can be done with such integration?
You would need to include a link to your Bootstrap stylesheet in the Pardot Form Layout Template.
Add https://github.com/davidjbradshaw/iframe-resizer to get your iframes to be responsive and automatically resize vertically, which is really helpful when you have form errors or a form that grows or shrinks in height for confirmation or conditional fields.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="%%description%%"/>
<title>%%title%%</title>
<link rel="stylesheet" href="https://yourdomain.com/media/styles/bootstrap.min.css">
</head>
<body>
%%content%%
<!-- Use iframe resizer to allow this form to resize itself in the parent page -->
<script src="https://yourdomain.com/media/scripts/iframeResizer.contentWindow.min.js"></script>
</body>
</html>
Absolutely. Just add https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css before the close of your head tag and add the col-sm-6 for 2 column or col-sm-4 for 3 column layouts. Works beautifully. If you need to add a class to the submit button just go to the layout template and open the form tab. You can add the class there.