Hide Div Tag on Mobile View Only

hide div tag on mobile view only?

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDIT: if you are using another CSS for mobile then just add the visibility: hidden; to #title_message. Hope this helps you!

Hide div on mobile devices, using CSS

For some reason (unknown to me) this worked:

<div  class="mobile-hide">
<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>

How do I hide a DIV when I switch to mobile dimensions?

Bootstrap has classes for this sort of thing. Use them individually or in combination to achieve the desired result.

hidden-xs

http://getbootstrap.com/css/#responsive-utilities-classes

Hiding div on mobile devices only

It doesn't look like you're doing anything with the mobile variable. But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); from hiding the div:

The DOM element you are referencing does not exist at the time the script is executed. The script should be executed after the DOM element is created, which can be accomplished a couple of ways:

1. Move the <script> tag to after the element in the HTML. This assumes that the link to jQuery is somewhere before the script, not after.

2. Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready. Since you're already using jQuery, this is usually the most convenient way to do it.

E.g.:

<script>
    $(document).ready(function() {
        var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
        $('.test').css('display', 'none');
    });
</script>

how to display an element only on mobile view?

You can add a similar logic to hide the .mobile-show image. Instead of using max-width: 480px, you can use min-width: 480px to only apply the show .mobile-hide on a viewport larger or equal to 480px.

Although unrelated to your case, I have concerns on your CSS and HTML. You shouldn't use !important carelessly. You should wrap text node in a HTML tag and heading should be wrapped with the heading tag (e.g. <h1>). Furthermore, in your case, it's better to use a CSS class than inline styles.

@media (max-width: 480px) {  .size-controller {    width: 100%;  }  .mobile-16px-font {    font-size: 16px !important;  }  .mobile-hide {    display: none;  }  .mobile-100-percent {    width: 100% !important;  }}
@media (min-width: 480px) {  .mobile-hide {    display: inline;  }  .mobile-show {    display: none;  }}

<h1 style="font-size: 20px; color: #26478D;">April 30 Web event, 4.30-5.00pm</h1>
<p>  <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-hide" hspace="10">  <img src="http://images.go.experian.com/EloquaImages/clients/ExperianInformationSolutionsInc/%7B2fd05069-3482-4a59-a8ee-b60f8b8c2c5e%7D_macbook-pro-3030365_300.jpg" width="250" align="right" class="mobile-show" hspace="10">  <span style="font-size: 14px; color: rgb(87, 87, 85); border-style: none; padding-right: 10px; padding-bottom: 10px; padding-top: 10px;" class="mobile-16px-font">                                      We did have something a bit more elaborate than a web event planned for April, however we’re equally excited to see how we go! We’ll be holding it at 4.30pm (EST) on April the 30th.<br>  Tune in to hear more about how Experian has adjusted their way of doing business over the last couple of months, the latest features available in Aperture 2.0 and hear directly from a couple of our Advocates on how they have benefited from the Advocate program, and how they have adapted to the new norm.<br><br>  We’ll run the event via a Webex, all you will need to do is grab a drink and click this link a few minutes before the time;   <a href="https://oneexperian.webex.com/oneexperian/onstage/g.php?MTID=e3f8dd6ff4b183fc082b93cab47892e3f&elqTrackId=dde80b180c2f4e0d9ea2b393afa99c17&elqTrack=true" align="center" data-targettype="link" title="Link">Webex event – 30 April at 4.30pm</a></span></p>