Display Content Only on Mobile Devices

Display content only on mobile devices

Basically the viewport dimension for mobile phones and tablets fall under media query of (max-width: 991px), so you can update your code this way.

@media (max-width: 991px) { 
   .mobileShow {display: block;}
}

However, some tablets have dimensions of 1024px width, so if you want to include them as well, you can use this code.

@media (max-width: 1024px) { 
   .mobileShow {display: block;}
}

How to show text only on mobile with CSS?

Use media query.

Set display:none to div and then apply display:block for mobile using max-width media query.

Stack Snippet

div {  display: none;}
@media only screen and (max-width: 768px) {  div {    display: block;  }}

<div>Text</div>

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>

How to use CSS to display only three items on a mobile device

Here you go.

.list {
  width: 300px;
}

.list .item {
  width: 100%;
  text-align: center;
  padding: 16px;
  background-color: #fed71a;
  list-style: none;
  margin-bottom: 1px;
}

@media (max-width: 414px) {
  .item:nth-child(4),
  .item:nth-child(5),
  .item:nth-child(6) {
    display: none;
  }
}

<ul class="list">
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
</ul>

How to display html content only on tablets and not on phone or desktop?

You can use CSS media queries to solve this. The standard size for tablets is the range 768px to 992px. So, you can write two media queries: one for less than tablet-size(mobiles) and other for greater than tablet-size(desktops). And then set visibility to hidden and display to none. Any css you want to write for tablet size you can include it in your normal standard css.

@media screen and (max-width: 768px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

@media screen and (min-width: 992px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

How do I show elements on mobile devices and tablets only with :not(hover)

While as you say you cannot test for every single device (and it's an insecure thing to do anyway) you can test, as MDN puts it, to see if

the primary input mechanism can conveniently hover over elements.

I am not sure exactly how 'conveniently' is defined here, but MDN deems having to do a long touch as not in that category.

Here's their example as a snippet:

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

<a href="#">Try hovering over me!</a>

CSS media to hide/show div in mobile and desktop?

I have just checked the live link.

Meta tag is missing for responsive devices.

Add the below code for detecting mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

Related Topics