What is the best way to turn off HTML codes of varying sizes?

I am looking to disable certain HTML code in a specific size. For example, I would like to disable or modify a div with the class "container" when it is 576px wide. Here is a snippet of my code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
                 <div class="row">
                        <div class="col-2 col-sm-1 col-md-1 col-lg-2">
                            <div>
                                <a>Some codes</a>
                            </div>
                        </div>
                        <div class="col-8 col-sm-9 col-md-9 col-lg-8">
                            <div>
                                <nav>
                                    <ul class="cf--main-menu-wrapper">
                                        <li><a href="#">Home</a></li>
                                        
                                        <li><a href="#">Pricing</a></li>
                                        <li><a href="#">Our Features</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="col-2 col-sm-2 col-md-2 col-lg-2">
                            <div>
                                <a>Download App</a>
                            </div>
                        </div>
                    </div>
        </div>

In this question, I mentioned a div specifically, but I actually mean all HTML code. Thank you.

javascripthtmlcssresponsive-designbootstrap-4

Answer №1

One way to achieve this is through the utilization of media queries as shown below:

@media screen and (max-width: 576px) {
    .container {
        display: none;
    }
}

With media queries, you have the ability to selectively disable specific portions of your code.

Answer №2

If you're currently utilizing bootstrap 4, it's best not to mix media queries on top of that unless there is a valid reason for doing so (read on below).

Instead, make use of the predefined classes for hiding elements that are provided by bootstrap (which already incorporate media queries in their functionality).

For instance:

<div class="d-sm-none">hide on screens wider than sm</div>
<div class="d-none d-sm-block">hide on screens smaller than sm</div>

The 'sm' designation is based on your request for 576px resolution - refer to this link for more information.

Only resort to using media queries if you require a screen resolution that isn't covered by the pre-existing classes offered by bootstrap.

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

Flow the child process output as it streams

I have a unique custom command line tool implemented in Python which uses the "print" statement to display its output. To interact with this tool from Node.js, I spawn a child process and send commands to it using the child.stdin.write method. Below is an ...

javascriptpythonnode.js

The state is not being processed properly

One challenge I am facing involves two components where a user can attach an image or gif to a post. When the image is clicked, a modal pops up and I aim to pass the data back to the modal so that the clicked image displays. To address this issue, I imple ...

javascriptreactjsstate

Is it possible to create .html files using the provided list of words?

Can we create .html files from a word list? Check out the example shown in the attached image. Thank you! View Image ...

htmltext

To insert a new row into a table with an onClick function, along with removing this attribute from all other rows except for the newly added one

I recently created a piece of code that enables the addition of a new row and removes an (onClick) attribute when clicking on an existing row within a table. <table style="vertical-align:middle;margin:20px;" id="table_insert"> <tr id="tra" > ...

javascriptjqueryhtmldom

What is the best way to toggle the navigation bar between opened and closed

I'm having trouble with this navbar not opening and closing properly. Can anyone suggest what script I should add? <nav class="navbar navbar-expand-md"> <a class="navbar-brand" href="/"> <img src=&qu ...

javascripthtmljquerybootstrap-4navbar

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

javascriptcsshtml-tableexpandable

What is the best way to send JSON data from Express to a JavaScript/jQuery script within a Pug template?

Currently, I am facing a challenge in passing JSON data from an Express route to a .js file located within a .pug template. I have been attempting to solve this issue using the following method: The router: // Office Locations router.get('/office_lo ...

javascriptjqueryexpresspug

Displaying particles in system

I'm utilizing the Three.js ParticleSystem to showcase a large number of points, which greatly improves performance. At certain zoom levels, the particles may appear very close together, leading to the appearance of strange De Moivre fringes when adju ...

javascriptthree.js

Leverage the full capabilities of mobile devices directly from a mobile web browser using JavaScript, no need for a native

I am curious about something. Is it possible to access device-specific functionality on a mobile web browser using JavaScript (or any other library) without the need for a native wrapper like PhoneGap? I am looking to create a mobile website that can uti ...

javascriptcordovamobile-websitenative-code

Tips for modifying JSON property names during the parsing process

As outlined in the JSON.parse documentation, a reviver function can be utilized to modify the value of each property within the JSON data. Here is an example: JSON.parse('{"FirstNum": 1, "SecondNum": 2, "ThirdNum": 3}', function(k, v) { return ...

javascriptjsonparsing

An issue has arisen with Windows Script Host while trying to run a JavaScript program

I have been struggling to access my index.js file despite reinstalling Windows and attempting all suggestions found online. Unfortunately, I continue to encounter the same error message. Script: C:\Users\usename\foldeename\file.js ...

javascriptreact-nativecompilationsyntax-error

Is there a way to easily generate multiple prints with just one click?

How can I make this iframe print multiple times when the Print button is clicked? The current code only prints once. Any suggestions would be greatly appreciated. Thank you! $("#printing").on('click',function(){ var printYesNo = ...

javascriptjqueryprinting

Headers and data organization in Angular 2

I'm searching for a simple Angular 2 example that demonstrates how to fetch both the headers and data from a JSON API feed. While there are plenty of examples available for fetching data only, I haven't been able to find any that show how to retr ...

javascriptjsonangular

Converting JSON data into XML format

When I am converting JSON Values to XML, instead of getting JSON properties as elements of XML, I am receiving "title":"source". The desired output should be <title>source</title>. Can you help me identify what mistake I mig ...

javajavascriptxmljsondynatree

Determine whether the response from a jQuery AJAX call is in JSON format or binary. If it is found to be binary, proceed

I am currently using ajax to retrieve and download an xlsx file from a PHP script. The script has two possible types of responses: JSON format if there are any warnings preventing the download (such as incorrect parameters), or the xlsx binary stream if ev ...

javascriptjqueryajax

Clickable button on bootstrap 5 popover to close it and also close the popover by clicking anywhere on the

How can I close a popover when a button inside data-bs-content in Bootstrap 5 popovers is clicked, considering there is no built-in function to close it on body click? Below is the code snippet: $(document).ready(function() { // Initialize popove ...

javascriptjquerytwitter-bootstraptooltipbootstrap-5

What is the best way to create vertical separators between CSS grid elements?

I currently have a grid with 3 columns and would like to add two vertical lines to separate the elements. To achieve this, I have placed two span elements between the grid elements using css styling. .vertical_line { position: absolute; height: 100%; ...

htmlcss

Displaying "Loading..." with jQuery in Bootstrap 4 while utilizing the data-loading-text feature

I am attempting to create a loading effect for a button, similar to the example shown on codepen. My project utilizes bootstrap 4 (beta 2) and Jquery 3.2.1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l ...

javascriptjqueryhtmlbuttonbootstrap-4

What is the best way to implement validation in React where selecting an option from one dropdown menu automatically disables that same option in another dropdown menu?

In my React form design, I am working with two dropdown categories: "What Include" and "What is not include". My goal is to disable any option selected in the "What Include" menu from being available in the "What not Include" dropdown. Below is the code f ...

javascriptreactjsformsvalidation

Using CSS to style the footer with a body height set to 100%

I am currently working on an angularJS web app with a basic template structure: <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="top"> <!-- Templates with vi ...

htmlcssangularjs