How I Can Disable Html Codes In Different sizes?

Question

I want to Disable Some Html Code in Specified size that I want for example I want to disable or edit a div with Class container in size 576px this is 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>

i mentioned a div in this question but i mean every html code. thank you.

Possible duplicate of [Div show/hide media query](https://stackoverflow.com/questions/11796297/div-show-hide-media-query) — Rémi M., Mar 09 '19 at 09:22

score 0 · Answer 1 · answered Mar 09 '19 at 09:07

0

This can be possible by using media queries like this

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

You can disable any part of the code that you want by using media queries.

answered Mar 09 '19 at 09:07

Usman

463
2
9

Rot-man · Answer 2 · 2019-03-09T09:32:44.787

If you're already using bootstrap 4 I wouldn't mix media queries on top of that (only for a good reason - see below).

Use the build in classes for hiding elements that bootstrap provides (they use media queries behind the scenes).

An example:

<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' value is because you asked for 576px resolution - check here for more details.

You can use media queries ONLY if you need a screen resolution that is not supported by the build in classes that bootstrap provides.

How I Can Disable Html Codes In Different sizes?

2 Answers2