The visibility classes d-none and d-sm-block are not functioning properly on mobile devices or when toggling

I have been attempting to hide a card on mobile devices using the class "d-none d-sm-block". However, while this method works when I resize the page, it does not work on actual mobile devices or when using the toggle device toolbar in Chrome. Strangely, the class "d-none d-lg-block" works perfectly fine regardless of how I view it. Can anyone explain why the "d-sm-block" class is not working as expected? I have tested this on different browsers with the same result. Here is the code I am using:

<div class="card d-none d-sm-block">
  <div class="card-body">
        <h4 class="card-title" align="center">Example</h4>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

For devices with screen widths of 540px or smaller, the xs category is applicable. However, given that many phones nowadays have larger screen sizes, they would fall into the sm category instead. Check out the documentation for more information.

Therefore, to specifically target desktop and larger screens, it is recommended to use md-; for example, utilize d-none d-md-block.

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 is the best way to eliminate the border in IE edge that surrounds special characters?

Here is the current appearance of the cross button in IE/Edge: https://i.sstatic.net/JZ37V.png And here is how it is supposed to look: https://i.sstatic.net/Uqafg.png Upon inspecting the CSS, it reveals that the #10006 html character has a color code o ...

htmlcssinternet-explorerspecial-characters

polygon with five or more sides

Can divs be created with shapes such as five or six corners? I am looking to create clickable zones on a map and any alternative methods would be greatly appreciated. ...

csshtml

What is the best way to position the wizard on both the left and right sides of the screen

Currently, here's the code I have, and I want it to appear like this. What are the steps needed to adjust the CSS in order to achieve that? .nav-wizard { display: table; width: 100%; } .nav-wizard > li { display: table-cell; text-align: ...

csstwitter-bootstraptwitter-bootstrap-3

Can you find a method to retrieve the current page on a dashTable?

I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...

pythonhtmlcssplotly-dash

Assertion error: 1 does not match the expected value of 6

I am faced with a challenging test that requires me to write code that will pass successfully. However, no matter what I try, all I get is the following error messages: "Failed asserting that 1 matches expected 6" when I return 6 and "Too few arguments t ...

phphtmlobjecttesting

Glitch Uncovered in Excel Spreadsheet I Exported

I have a situation where I am working with an HTML table that includes both text and radio buttons. The issue arises when I attempt to export the table data along with the selected radio button values to Excel using the 'Export to Excel' button. ...

javascriptjqueryhtmlcssexcel

Background image of HTML Iframe element does not display - Inline style block

https://i.stack.imgur.com/JW26M.png After setting the iframe's innerHTML using this line of code: iframedoc.body.innerHTML = tinyMCE.activeEditor.getContent(); The styles for the elements within the iframe are contained in an inline style block. Ho ...

javascriptjqueryhtmlcssiframe

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

I have successfully created a json File containing an array of "learnobjects", each including an id, name, and link. Check out my plnkr example var myMessage = { "learnobjects": [{ "id": "1", "name": "Animation-Basics", "link": "animation_bas ...

javascripthtmlangularjsjsondom

Steer clear of retrieving all the elements from the HTML DOM at once

Scenario I am working on a HTML5+CSS+JS slideshow project that needs to be synchronized across 50 clients in a local area network using a single wireless router. Challenge Due to the heavy content, particularly images, of the slides, I intend to dynamic ...

javascripthtmljquery

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

javascripthtmlcss

Width of flex container overflowing from relative position is at its full capacity

I'm attempting to create a horizontal line across an overflowing flex container by using an absolutely positioned child element with both the left and right set to 0. This requires the container to have a relative position to contain the absolutely po ...

htmlcssflexboxoverflow

Tips for showcasing heading and paragraph elements side by side in css?

I have a block of HTML code that includes a heading and two paragraphs: <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and foll ...

htmlcss

"Exploring the Power of Jsoup for Selecting

I'm attempting to extract all the links nested within the div class news column index. Here is a snippet of the HTML structure: https://i.stack.imgur.com/zdFWS.jpg Below is the code I have used, but unfortunately, it's not yielding any results. ...

javahtmlcsswebjsoup

Attempting to implement a date picker in an ASP.NET C# page using Bootstrap

I am currently working on setting up a form in asp.net with Bootstrap and I am facing an issue with incorporating a date/calendar picker for one of the input fields. Despite my efforts, all I can see is a plain input field with no functionality. The cale ...

asp.netbootstrap-4

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

cssreactjsmaterial-ui

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

I would like to be able to change the background image of a <div> when hovering over a link. Initially, the <div> should not have a background image when the page loads for the first time. This is my current setup: <div class="background"& ...

javascripthtmlcsshoverbackground-image

Bidirectional updates in AngularJS with CSS styling

On the backend, certain HTML elements store their position and size persistently and retrieve them when the page loads. These elements can be dragged and resized by users, with any updates needing to be saved on the backend for consistency across sessions. ...

javascriptjquerycssangularjs

Tips for showcasing the latest Google Map InfoWindows above previous ones

I have a dynamic Google Map with InfoWindows being added dynamically, but I am facing an issue where overlapping InfoWindows do not always display the most recent one on top of older ones. Is there a way to ensure that the latest InfoWindow always shows u ...

javascriptjqueryhtmlcssgoogle-maps

Disable the moving of the DIV button with a left-margin of 0px

Having a bit of a challenge here. I'm attempting to craft my own slider using jQuery along with some css and javascript. I've managed to get my slider functioning, moving a Div 660px to the left and right upon button clicks. However, I'm h ...

javascriptjqueryhtmlcss

The alignment of elements varies between Internet Explorer and Firefox on websites

Whenever my site loads on Firefox, the phrase "Locate A Math Instructor" appears directly above "Private Math Teacher": This is the layout I desire. However, when viewing the same page in Internet Explorer, "Find a Maths Tutor" shifts up and to the left ...

htmlinternet-explorerlayout