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

The website does not display properly on larger screens, while showing a scrollbar on smaller screens

I'm encountering an issue with my website where I can't seem to find a solution no matter what I try. My goal is to ensure that my website looks consistent across all computer screen sizes. However, when viewed on larger screens, there's a ...

htmlcss

Implementing CSS styles to Iframe content

I have written the following code snippet to display an iframe: <iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false& ...

phpjavascriptjquerycssfacebook-like

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling

Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks: https://i.stack.imgur.com ...

htmlcss

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

htmlcss

Struggling to create a drop-down box with CSS and not achieving the expected results

Currently, I am delving into the world of HTML and CSS to hone my skills in front-end web development. While attempting to code a drop-down box within my navigation menu, I have encountered an issue where the drop-down opens at the left corner while the na ...

htmlcss

Preventing text from wrapping around an image: tips and tricks

I've been struggling to prevent text from wrapping around an image on my webpage. Despite various attempts like enclosing the image and text in separate <div> elements, setting both the <img> and <div> to display as block, and even t ...

htmlcssword-wrap

Guide to vertically aligning text within a row using Bootstrap 5

I am currently struggling to achieve vertical alignment of text in the center of a row. Despite my efforts, I have not been successful in achieving the desired vertical alignment. What steps can be taken to ensure that the text is vertically centered with ...

htmlcsstwitter-bootstrapbootstrap-5

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

javascripthtmlcsssweetalert

Activate the toggle menu

Hi there! I'm currently working on a menu and I want the clicked item to become active, switching the active state to another item when clicked. However, my current implementation is not working as expected. Any assistance would be greatly appreciated ...

javascriptjqueryhtmlcsstoggle

Struggling to get my upload form to function properly with two different versions of jQuery, even after attempting to use jQuery.noConflict

I am facing an issue with a webpage that contains two different forms. The first form is for uploading pictures and generating the link for the uploaded images, while the second form is a regular one used to add products to a database using the links from ...

phpjqueryformstwitter-bootstrap

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...

cssreactjsfont-awesomematerial-uitailwind-css

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups The goal is to keep the height of the box consistent even when the description varies Here's my codepen link : https://codepen.io/po ...

cssvue.jsvue-componentvuetify.js

Should we make it a routine to include shared sass variables in each vue component for better practice?

Within my Vue application, there are numerous components that rely on shared variables like colors. I'm considering having each component import a global "variables.scss" file. Would this approach have any adverse effects? ...

cssvue.jssass

Flowing vertically and horizontally while adjusting line height within the <small> HTML tag

While working on the typography for my new website, I encountered an unusual issue with the <small> tag. It seems to be messing up the line-height, unlike other elements like heading tags and paragraphs. Here's a visual representation of the pr ...

htmltagsvertical-alignmentcss

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

The div element is failing to occupy the entire page

I have encountered an issue where I created two small blocks, but they do not start from the screen edges. Instead, they take up space from the left, right, and top as well. Here is my code: HTML <body> <div id="header"></div> & ...

htmlcss

Guide to integrating a static page with personalized CSS and JavaScript resources within a Rails project

Currently, I am developing a simple Rails application (using Rails version 4.1) and I am looking to incorporate a static page into it. The static page is structured as follows: | |- index.html |- css folder |-- (various css files) |- js folder |-- (some j ...

javascripthtmlcssruby-on-railslayout

Custom Tooltips arrow is not receiving the CSS styling

I have implemented ReactTooltip from the ReactTooltip library You can view an example here Component Setup <ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> {children} </ReactTooltip> Stylin ...

javascriptcssreactjssasstooltip

Is jQuery utilized by the bootstrap-grid system?

Finale: In our current setup, we are utilizing Angular 9, and like many frontend frameworks, there is a preference against incorporating other JavaScript libraries alongside the framework for manipulating the DOM. The Challenge: I am hesitant to include ...

javascriptjqueryangulartwitter-bootstrapbootstrap-4