Hide if Mobile

[habreu]

I have an element I need to hide if on mobile device. I saw an example of the forums

@media only screen and (max-width: 480px) {
.new-style {display:none;}
}

However using my phone the product dimensions show 1440 x 2560 pixels as the screen size so to hide it using that method would effectively hide it from most monitors too -or am I misunderstanding something? Can someone help me with a solution?

I'd like to propose a magical miva mvt tag of some sort i.e. < mvt:commentif {ismobile=1} > to turn the tagged block into a comment or some other simple solution for us non-programmer folks.

[Matt Zimmermann]

If you are using one of our ReadyThemes, there are built-in classes to help with this. Let me know if you are, and which one, and I can point you in the right direction.

[habreu]

We have a theme customized by you but based on Levels. I found a workaround by reducing the text of a floating 'Need Help?'' popup to just a '?' symbol -so it isn't as troublesome. If there is a simple example of how to do this for a class, that differs from the example above please let me know; I can identify the parent element on the desktop but no experience with handling desktop/vs mobile devices. Thank you.

[Bruce - PhosphorMedia]

I doubt your phone has a 1140 x 2560 pixels. So, using media rules is exactly appropriate for your needs. (Here's what we use for Easy Contact's prompt on mobile for example)

/***
Responsive Prompt
Need to remove Text from Prompt Window. Text is supplied by :after psuedo action in the following CSS rules
***/


/* DESKTOP - ALL */
#ecContactDiv .ui-dialog .ui-dialog-titlebar {color:#fff;}
#ecPrompt .ecPromptText:after {content:"Need Help? Questions?"}
#ecPrompt .ecPromptText {
   font-size: 1.1em;
   color: #fff;
   font-weight: bold;
}

#ecPromptLocation .ecPromptDisplay {background:#128C9E;}

/* Mobile Phones Landscape */
@media screen and (max-device-width: 640px) and (orientation: landscape){

   #ecPrompt .ecPromptText:after {content:"?"}  
   #ecPromptLocation .ecPromptDisplay {
      position: fixed;
      top: 50%;
      right: 0px;
      z-index:9999;
      height: 40px;
      width: 40px;
      text-align:center;
      font-size: 1.1rem;
      background-color: #128C9E;
      color: #fff;
      font-weight:bold;
      display: block;
   }
} /* END */

/*  Mobile Phone Portrait */
@media screen and (max-device-width: 380px) and (orientation: portrait){

   #ecPrompt .ecPromptText:after {content:"?"}
   #ecPromptLocation .ecPromptDisplay {
      position: fixed;
      top: 50%;
      right: 0px;
      z-index:9999;
      height: 40px;
      width: 40px;
      text-align:center;
      font-size: 1.1rem;
      background-color: #128C9E;
      color: #fff;
      font-weight:bold;
      display: block;
   }
} /* END */

/* Mobile Phones Portrait or Landscape */
/* @media screen and (max-device-width: 640px){ */
/* not currently used */
}

/* iPhone 4+ Portrait or Landscape */
/ @media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){ */
/* not currently used */
}

/* Tablets Portrait or Landscape  */
/* @media screen and (min-device-width: 768px) and (max-device-width: 1024px){ */
/* not currently used */

/*  Desktop Only
@media screen and (min-width: 1024px){
/* not currently used */
}*/

As you can see, we also went with switching to ? on mobile as a prompt.

[habreu]

Hi Bruce. It was actually Easy Contact I tried to hide - though by changing the text to '?' as I mentioned it isn't an issue now. It may be a conversion issue between dpi and ppi causing my confusion(?) but Samsung lists the specs for the Note 5 as

Screen size: 5.7 inches
Resolution: 1440 x 2560 pixels
Pixel density: 518 ppi

As for the auto '?' you had - I was still getting the 'Need Help' on the Samsung Note 5's Chrome browser. :)

[Bruce - PhosphorMedia]

Yea, resolution isn't the same as Screen Size in pixels. BTW: Handy tool in Chrome inspector. If you go to response mode (Open inspector is the second button from the left at top) you can view a list of common phones, selecting that phone sets the screen size accordingly. While its only good for 'general' appearance, it also list the pixel size so its a handy reference.)

I'll check what's going on with the Note 5 Thanks!

[Matt Zimmermann]

In answer to the original question of a helper class within the ReadyTheme, the Levels theme has as set of classes in the 'helpers.css' file for just that. To hide something on a mobile device, say less than 640px, you would assign a the classes of 'all-hidden small-all-shown'.