Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one of these elements is displayed at a time?

To test this problem, I visited Bootstrap's website example at in the helper classes section under showing and hiding content.

You can view Bootstrap's website example on a half-width screen here.

When the screen width is slightly reduced from half-width, the following elements are shown: ✔ Hidden on x-small (Green) Medium (Greyed out) ✔ Hidden on x-small and small (Green) ✔ Hidden on x-small and medium (Green) ✔ Hidden on x-small and large (Green)

<div class='col-xs-12'><div class='hidden-xs'>This content should be hidden on mobile only, but visible on everything else</div><div class='hidden-sm hidden-md hidden-lg'>This content should be hidden on everything apart from xs devices</div></div>

But when the browser window is resized to half the screen's width, both the "hidden-xs" element and the "hidden-sm, hidden-md, hidden-lg" elements remain visible until the width is adjusted again. It seems like there is a gap in the required width to determine an element as xs or sm.

csstwitter-bootstraptwitter-bootstrap-3

Answer №1

After some experimentation, I have come across a solution, but first, let's delve deeper into the issue.

This particular issue arises specifically at the precise maximum width of each element size class (such as xs, sm, etc.) in Google Chrome only. While Bootstrap developers are aware of this issue, they seem hesitant to address it promptly.

If you want to ensure that hidden-xs and hidden-sm elements do not both appear simultaneously, you will need to adjust the max-width value with greater precision in each hidden class's media query. For example, set hidden-xs, hidden-sm to have a max-width of *.99;

Below is an illustration:

@media only screen and (max-width: 767.99px) {
    .hidden-xs {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.99px) {
    .hidden-sm {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.99px) {
    .hidden-md {
        display: none;
    }
}

@media only screen and (min-width: 1200px) {
    .hidden-lg {
        display: none;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the difference in behavior between absolute positioning in <button> and <div>?

I am noticing that the code below is not positioning my span to the top-left corner of the button as I expected. Can anyone explain why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> &l ...

htmlcsscss-position

Ensure that the container div is filled by the image if the image exceeds the dimensions of

I have a footer menu with a background image that is larger than the div itself (2000x168). Even though I have set the width to 100%, it seems like the whole image isn't displaying. Instead, only a portion of it is visible, matching the size of my sc ...

htmlcssbackground

Tips for utilizing both the Element Selector and Class Selector in Jquery

I am working with a simple table that has TDs assigned either the 'PLUS' or 'MINUS' class. My goal is to use jQuery to implement functionality for collapsing all or expanding all. When the Expand All button is clicked, I need to chang ...

javascriptjquerycssjquery-selectors

Eliminate any additional spacing within the pre/code tags

I am currently utilizing prism.js for code highlighting. I have encountered an issue where there are unnecessary white spaces at the top and bottom of my output. You can view a live example here. <pre> <code class="language-css"> &lt ...

javascriptjqueryhtmlcss

The transition between backgrounds is malfunctioning

I want to create a smooth transition effect for changing the background of an element within a setInterval function. Currently, the background changes immediately, but I would like it to transition over a period of time. var act = true; setInterval(func ...

javascripthtmljquerycsscss-transitions

Looking to position the Secondary Navigation Bar on squarespace at the bottom of the page, distinct from the primary Navigation Bar

When SALES PAGE becomes the secondary navigation option Instructions for positioning style to Bottom Center I am attempting to place it at the bottom of the navigation bar. Can you provide me with the necessary code or styles in squarespace? When I choose ...

csscustomizationmarginnavigationbarsquarespace

The fancybox scroll feature is visible when using a browser, but unfortunately, it does not appear on the

I noticed that the scrollbar in my fancybox is not showing up on iPad, but it does display when using Google Chrome on Desktop. You can find the page here. The issue seems to be with the vertical scroll bar not appearing on iPad. Has anyone encountered th ...

jqueryhtmlcssipadfancybox

A Comprehensive Guide on Creating an Expansive HTML Textbox Covering the Entire

<form method="post" class="mobile-login-form _5spm" id="u_0_0" novalidate="1" data-autoid="autoid_1"> <input type="hidden" name="lsd" value="AVpe_Wp1" autocomplete="off"> <input type="hidden" name="charset_test" value="€,´,€,´, ...

htmlcss

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Using the 'active' class in Bootstrap-4 Navbar specifically for the parent element

As I style the navbar in Bootstrap 4, I encounter an issue with dropdown items. Specifically, when I apply the 'active' class to highlight a dropdown item, all sub-items (children) end up with the same highlighting effect. This results in an unap ...

csshtmlbootstrap-4

Create a right-to-left (RTL) CSS file within a create-react-app project and dynamically switch between them depending on changes

I am currently working on a multi-language project using create-react-app. My goal is to incorporate a library like "cssJanus" or "rtlcss" to transform the Sass generated CSS file into a separate file. This way, I can utilize the newly created file when sw ...

cssreactjscreate-react-appright-to-leftrtlcss

How to Customize the Menu Style in Your WordPress Theme

As a newcomer to Wordpress theme development, I am struggling to properly style my navigation menu. Below is the raw HTML code I have: <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div cl ...

csswordpressmenuthemes

Blurring a section of a circular image using a combination of CSS and JavaScript

I'm trying to achieve a specific effect with my circular image and overlaying div. I want the overlaying div to only partially shade out the image based on a certain degree value. For example, if I specify 100 degrees, I only want 260 degrees of the c ...

javascriptjqueryhtmlcss

Three Divisions Positioned at the Top, Middle, and Bottom

I need to place 3 divs at the top, middle, and bottom positions. To achieve this, I have used jQuery to calculate the viewport height and apply a percentage of it to the top and bottom divs. However, resizing the page causes issues as the middle div overl ...

jqueryhtmlcss

Material UI button component does not have the applied class

I'm encountering an issue with applying a CSS class (redirectButton) to a Material UI button. Despite my efforts, the class is not being successfully applied. Below is the HTML code in question: {(isDataAdapterAdmin && !dataSources?.length) & ...

htmlcssreactjsmaterial-ui

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

In this guide, learn the best way to dynamically adjust image height to match the height of any device

I am trying to make sure that the image on the front page of my website fits the height of the screen or device, and resizes responsively without cropping when the device height changes. How can I achieve this? If you need a visual example of what I mean, ...

cssmobileresponsive-designcross-browser

Ways to identify the active anchor within an li element

Below is the code snippet I am currently working with: <li> <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a> </li> <li> <a href="<?php echo base_url()?>home/promos/text ...

javascriptjquerycssjquery-mobile

CSS allows for the creation of fixed bars that remain at the top of the

I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither ...

htmlcsscss-position

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

htmlcss