How to hide div class text for mobile devices or mobile view only?

Question

I'm trying to hide text content on splash screen of website. How to hide it with css or html code?

This is for perl based script with html and css based splash screen on homepage. This is the website. You can see the texts are messed on mobile devices.

I've tried below code to hide text on mobile:

@media only screen and (max-width: 800px) {
    #content {
       display: none;
    }
}

into this code:

</br>


    <div id="content">
    <div class="container" style="position: relative;top: 50%; transform: translateY(15%)">
        <div class="prompic" style="">
            <a href="<TMPL_VAR site_url>/?op=upload_form">&nbsp;</a>
        </div>  
            <div class="splashbar promsign">
            <a href="<TMPL_VAR site_url>/register.html">
                <div class="col">
                    <div class="pheader">
                        <span><img src="<TMPL_VAR site_url>/images/icon_sup_blue.png"></span>
                        <span>SignUp</span>
                    <div class="clear">
                Whenever you need to send a file that is too large for e-mail, <b><TMPL_VAR site_name></b> can help. If you need secure remote storage capacity for off-site backups, <b><TMPL_VAR site_name></b> offers best solutions for you.
                </div>
               </div>
            </div>
            </a>
        </div>
        <div class="splashbar promprofit">
            <a href="<TMPL_VAR site_url>/make_money.html">
                <div class="col">
                    <div class="pheader">
                        <span><img src="<TMPL_VAR site_url>/images/icon_profit_blue.png"></span>
                        <span>Become Affiliate</span>
                    <div class="clear">
                    With <b><TMPL_VAR site_name></b> you can earn money by promoting your files on the external resources. Just register and enjoy being a part of one or more of our affiliate programs!
                </div>
            </div>
        </div>
            </a>
        </div>
            <div class="clear"></div>       
    </div>
        <div class="col-12 lft splashHldr">
        <a href="https://play.google.com/store/apps/details?id=net." target="_new"><img src="/images/android.png" height="61"></a>
        <a href="/desktop_file_manager_mac.zip" target="_new"><img src="/images/mac_os.png" height="61"></a>
        <a href="/desktop_file_manager_win.zip" target="_new"><img src="/images/windows.png" height="61"></a>
    </div>
    </br>
        <div id="content" style="width: 980px">
                        <div class="col">
                            <div class="clear">
                            </div>
                            </div>
                            <b><TMPL_VAR site_name></b> is a cloud-based file hosting provider. We offer online cloud storage/remote backup capacity, sophisticated uploading and downloading tools. 
                        </div>
                </a>

    <style>
    body{background-image:url(../images/bg.png); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
    #header{background:none!important; border:0px!important;}
    footer{background:none; border:0px;position:absolute;bottom:0px;}
    footer .container1{display:none;}
    #mainmenu ul li a{color:#fff;}
    .copyright{display:block;}
    .prompic{margin: 50px auto 30px;}

    @media (min-width: 320px) and (max-width: 480px) {
    #container{margin:0px auto;}
    .prompic{margin: 10px auto 10px;}
    }
    @media (min-width: 600px) and (max-width: 800px) {
    #container{margin:0px auto;}
    }

    @media only screen and (max-width: 800px) {
    #content {
       display: none;
    }
}
    </style>

I expect to hide these messy texts on mobile devices but it didn't take any effect. How to do it properly?

Answer 1

`https://codepen.io/kunalvijan/pen/oRmRwp`

i have created a dummy codepen for you. just check and see if the solution works for you

Answer 2

min-width: 800px selects screens with a width of 800px or higher. Try max-width instead:

@media only screen and (max-width: 800px) {
...