What is the best way to remove the responsive features of a Bootstrap website when the width is less than 786

Question

What is the best way to remove the responsive features of a Bootstrap website when the width is less than 786

My current dilemma is with my Bootstrap-based website. I am trying to make it unresponsive for devices with a screen width of less than 768px, but responsive as usual for widths greater than or equal to 768px.

This is what I have attempted so far. In my global viewport setting:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

I have also experimented with adding a CSS snippet like this:

@media (max-width: 768px) {
  @viewport {
    width: 1024px !important;
  }
}

However, this method did not produce the desired result of mimicking a width of 1024px. Any advice from those who have encountered similar challenges would be greatly appreciated. Thank you.

html css twitter-bootstrap responsive-design viewport

Answer 1

Answer №1

As stated in the Bootstrap documentation:

Steps to eliminate page responsiveness

Exclude the viewport <meta> as mentioned in the CSS docs

Override the width on each grid tier's .container with a single width value, for example width: 970px !important;. Ensure this is applied after Bootstrap's default CSS. If needed, use media queries or specific selectors instead of !important.

If using navbars, eliminate all collapsing and expanding behavior. For grid layouts, incorporate .col-xs-* classes along with or instead of medium/large ones. The extra-small device grid will adapt to all screen resolutions.

Conditional exclusion of the viewport

To dynamically adjust the viewport, consider using JavaScript. Assign an id to your viewport meta element so it can be modified when the window width changes. For instance:

<meta name="viewport" content="width=device-width, initial-scale=1" id="viewport">

<script>
    window.addEventListener('resize', function() {
        var vp = document.getElementById("viewport");
        if (window.innerWidth <= 768) {
            vp.setAttribute('content', '');
        } else {
            vp.setAttribute('content', 'width=device-width, initial-scale=1');
        }
    }, true);
</script>

Overriding styles

Simply utilize media queries, as demonstrated before.

Answer 2

As stated in the Bootstrap documentation:

Steps to eliminate page responsiveness

Exclude the viewport <meta> as mentioned in the CSS docs

Override the width on each grid tier's .container with a single width value, for example width: 970px !important;. Ensure this is applied after Bootstrap's default CSS. If needed, use media queries or specific selectors instead of !important.

If using navbars, eliminate all collapsing and expanding behavior. For grid layouts, incorporate .col-xs-* classes along with or instead of medium/large ones. The extra-small device grid will adapt to all screen resolutions.

Conditional exclusion of the viewport

To dynamically adjust the viewport, consider using JavaScript. Assign an id to your viewport meta element so it can be modified when the window width changes. For instance:

<meta name="viewport" content="width=device-width, initial-scale=1" id="viewport">

<script>
    window.addEventListener('resize', function() {
        var vp = document.getElementById("viewport");
        if (window.innerWidth <= 768) {
            vp.setAttribute('content', '');
        } else {
            vp.setAttribute('content', 'width=device-width, initial-scale=1');
        }
    }, true);
</script>

Overriding styles

Simply utilize media queries, as demonstrated before.

Answer 3

Answer №2

To achieve your desired outcome, consider the example below. It is important to highlight that @viewport has been directly defined in the CSS.

CSS

.col-md-2 {
  height:200px;
}
@viewport {
  width:device-width;
  initial-scale:1;
}

@media (min-width: 1000px) {
.col-md-2 {
    background:#ff0000;
    width:100%;
    zoom:.1;
  }
}
@media (max-width: 1000px){
.col-md-2 {
    background:#fff000;
    width:200px;
  }
  @viewport {
    width:1000px;
    initial-scale:1;
    zoom: 1;
  }
}

HTML

<div class="container">
    <div class="col-md-2"></div>
</div>

For a live demonstration of this example, feel free to click on this link. Notice how the zoom factor adjusts significantly when resizing the browser window.

It is worth mentioning that @viewport currently lacks formal standardization. You can check for supported browsers on this page.

Answer 4

To achieve your desired outcome, consider the example below. It is important to highlight that @viewport has been directly defined in the CSS.

CSS

.col-md-2 {
  height:200px;
}
@viewport {
  width:device-width;
  initial-scale:1;
}

@media (min-width: 1000px) {
.col-md-2 {
    background:#ff0000;
    width:100%;
    zoom:.1;
  }
}
@media (max-width: 1000px){
.col-md-2 {
    background:#fff000;
    width:200px;
  }
  @viewport {
    width:1000px;
    initial-scale:1;
    zoom: 1;
  }
}

HTML

<div class="container">
    <div class="col-md-2"></div>
</div>

For a live demonstration of this example, feel free to click on this link. Notice how the zoom factor adjusts significantly when resizing the browser window.

It is worth mentioning that @viewport currently lacks formal standardization. You can check for supported browsers on this page.

What is the best way to remove the responsive features of a Bootstrap website when the width is less than 786

Answer №1

Answer №2

Similar questions

Using flexbox for layout can cause issues when trying to position elements

CSS reinitialization for the HTML5 button element

Searching for a table row that corresponds to the content of a cell using Python and Selenium

Placing Django Template Blocks in Custom Locations within a Page

Personalize the color and icon of the checkbox marks in sapui5

Editing HTML on an ASPX website can be a breeze with

Styling is applied by Bootstrap to inputs in a form that are not required

The argument 'TabsCtrl1' is throwing an error as it is not recognized as a valid function and is showing as

Utilizing CSS to incorporate percentage points

Combining Bootstrap with Rails

Override the class inside the ul div

Forced line break at particular point in text

A guide on applying color from an API response to the border-color property in an Angular application

Navigating to DIV position while rendering JSP

Retrieving the specific value of an input from a group of inputs sharing a common class

Incorporating a classList.toggle into a snippet of code

Tips on positioning an image at the center of an HTML page

Struggling to adjust the width of a div accurately following the population of AJAX content

Struggling to figure out the correct method for aligning calendar using bootstrap-datetimepicker?

Enhance the appearance of CardMedia in React Material UI with custom rendering options