I am currently using this template from Bootstrap 3: Bootstrap Dashboard Template
It's using the .container-fluid class, which is making the template fluid/responsive.
My question is - I want to benefit from the full-width template, but I don't want to support the responsive layout.
I wish to achieve this template layout:
How can I do this, without having to deal with the responsive stuff?
The bootstrap documentation has a paragraph to disable responsiveness.
Steps to disable page responsiveness
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.
Related
I made a Navigation bar in the header and have added media queries for mobile devices and table but any thing in middle of this makes the page layout look bad so do i need to add more media queries for all measurements or is there an other way of making page more responsive.
I tried doing it with media queries but was wondering if their is another way around.
You can use libraries like Bootstrap or Tailwind and its easy to learn and use,
or you can just use flexbox or grids in CSS.
Learn more about Flexbox on MDN, using this link.
Learn more about the CSS Grid Layout system on MDN, using this link.
you can use your same media queries but make sure that your sizes are in
em
or
%
in this case everything will go smaller and bigger according to the user's device width.
that's in case you don't want to use a css library which is also recommended.
First, lets keep all simple, is not required to use libraries to build a responsive views
You need to implement mobile first, implement mobile then you can adjust only required elements to other break points (tablet, desktop, ...)
Here you can use break points, flex, grid and positions
Manage all spaces (margins, paddings) with parent container to make less changes, here you can take advantage of flex and grid to centered and spaces between elements the trick is property gap, in this days is not required to use tables to adjust elements
If you are building components dont forget, all components should be reusable, configurable and mantenible
Here is some interesting content:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
there is a greyspace (gap) when I am trying to view the page in mobile/ other size, how do I remove the greyspace? all the images have the same height and width
Make use of Media Queries or Bootstrap-4 supported utitlies like p-md-0 m-sm-0. Bootstrap-4 make use of Mobile-First-Design Approach, work accordingly.
This resource may help https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp
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 need to make it so Twitter Bootstrap doesn't go on responsive mode when I hit a resolution below 1024px. In other words, I want the horizontal sidebar to show up and not touch my rows or columns.
I have some conditionals with higher resolutions that I manage to achieve using the online LESS compiler, so I assume this can be done.
Which flag will I have to modify in order to do this?
This will help to avoid responsiveness on smart phones and tablets.
<meta name="viewport" content="width=1024">
Also remove initial-scale=1and other values.
Add a container for everything, and set a min-width.
<style>
.page-container {
min-width: 1024px;
}
</style>
<body>
<div class="page-container">
...
</div>
</body>
Probably posting much too late, but I was also attempting to do the same thing. If you follow these instructions via Bootstrap you will have a layout that stops being responsive below 1024px.
The Bootstrap docs have a guide for disabling responsiveness.
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.
I am creating a feature for my responsive website. It consists of an image carousel which contains a caption. On desktop, I am displaying the caption absolutely. The div, which contains a header and paragraph, is positioned on top of the image and takes up a width of 40%.
When the user is using a tablet or mobile I would like to display the caption relatively with a width of 100%. This makes the text appear under the image which is more suitable on the smaller screen sizes.
The two ways of doing this would be to duplicate the code with different css classes - one relative with the visible-desktop class and the other absolute div with the class hidden-desktop. The other way is to use javascript to toggle a class.
I was thinking, it would be great if I could achieve the above using purely css. Something like .desktop .carousel-caption { Is this at all possible.
You could maybe just use media queries and enter your different code in the relevant media query. Bootstrap's media queries are detailed here
http://getbootstrap.com/2.3.2/scaffolding.html#responsive