Project / Support Center
Welcome, Guest. Please login or register. April 23, 2019, 12:23: AM
Home Help Search Login Register
D-Web Web Site Creator D - Web Web Site Creator On-line HTML Editor No Programming knowledge required. Web Global Net PayPal-Cart Shopping Cart System PayPal - Kart Shopping Cart System for E-Commerce over the internet, that's easy to use. Web Global Net Newsletter Manager Newsletter Manager On-line Newsletter Creator with Email Subscriber Management.
Ring Central Discount
Web Global Net Web Application & Web Development Project Center  |  Technical Issues  |  CSS Related  |  Topic: Hiding and element on a page based on screen size 0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Go Down Send this topic Print
Author Topic: Hiding and element on a page based on screen size  (Read 293 times)
admin
Administrator
******
Offline Offline

Posts: 154


« on: February 21, 2019, 05:14: PM »

I wanted to hide a uploaded graphic header on a smartphone because it took up too much space, yet I wanted the uploaded graphic header to show on larger screens. Although I saw a lot complicated ways to do it , this method below was by far the simplest.

On the page I added this style into the head area.

 <style>
    @media all and (max-width: 479px) {
    .header_upload {display:none;}
}</style>


Then what ever I wanted to hide I wrapped it in a Div tag with the class of the element name (in red) :

<div class="header_upload">
         <?php
// Show IF Conditional region2
if (@$row_rsgroup_prefences_session['group_pref_website_header'] != "") {
?>
              <?php include("Main_File_1/inc_pages/header_logo.php"); ?><?php }
// endif Conditional region2
?>
         <?php
// Show IF Conditional region3
if (@$row_rsgroup_preferences_url['group_pref_website_header'] != "") {
?>
              <?php include("Main_File_1/inc_pages/header_logo.php"); ?>
              <?php }
// endif Conditional region3
?>
      </div>  

You can add as many <Div class"Element_Name"> </Div> wrappers on a page as you need too it seems.

just add this to the Media style for each element you want to hide.
 .Element_Name {display:none;}
« Last Edit: February 21, 2019, 05:16: PM by admin » Report to moderator   Logged

The Unknown Webmaster
Pages: [1] Go Up Send this topic Print 
Web Global Net Web Application & Web Development Project Center  |  Technical Issues  |  CSS Related  |  Topic: Hiding and element on a page based on screen size « previous next »
Jump to:  


Login with username, password and session length
Powered by MySQL Powered by PHP Powered by SMF 1.1.19 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!