Jump to content


Photo
- - - - -

Make area not visible on Mobile?


Best Answer Jake , 17 October 2013 - 03:45 PM

Hi @jmad - You would want to use the media queries for that column/graphic. At the moment, the developers are working on adding a visibility class to the individual section's styling classes, but hide there is a workaround that should get you to where you want to go as follows:

 

Go to the section you wish to hide on a mobile device, in the styling classes field, add the following class name.
 
hidy-phone
 
Click publish. Now go to DMS Toolbar > Custom Code > Custom CSS/LESS editor and add the following:
 
@media (max-width: 767px) {
  #site .hidy-phone {
    display: none;
  }
}
 
Click publish and refresh, when the site reloads, reduce your browsers window size and the section that has the hidy-phone class should no longer be visible. You can apply this class to any sections you like.
Go to the full post


  • Please log in to reply
4 replies to this topic

#1 jmad

jmad

    Advocate

  • Members

  • 893 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 17 October 2013 - 02:42 PM

I have a text box in a column and holding a graphic.  I would like for the text box not not be displayed when the screen gets to either ipad mini or iphone size.  Is this possible?



#2 jmad

jmad

    Advocate

  • Members

  • 893 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 17 October 2013 - 02:43 PM

Or resizing the graphic (actually an icon font) would work as well.



#3 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 17 October 2013 - 03:45 PM   Best Answer

Hi @jmad - You would want to use the media queries for that column/graphic. At the moment, the developers are working on adding a visibility class to the individual section's styling classes, but hide there is a workaround that should get you to where you want to go as follows:

 

Go to the section you wish to hide on a mobile device, in the styling classes field, add the following class name.
 
hidy-phone
 
Click publish. Now go to DMS Toolbar > Custom Code > Custom CSS/LESS editor and add the following:
 
@media (max-width: 767px) {
  #site .hidy-phone {
    display: none;
  }
}
 
Click publish and refresh, when the site reloads, reduce your browsers window size and the section that has the hidy-phone class should no longer be visible. You can apply this class to any sections you like.

  • tuftseducation likes this

#4 jmad

jmad

    Advocate

  • Members

  • 893 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 October 2013 - 01:33 PM

@Jake

Worked great.  I'm still new to CSS and understand everything in the code you provided except what the @media does?  



#5 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 18 October 2013 - 03:11 PM

Hello jmad

 

The best explanation of @media queries i have seen is located on this site http://css-tricks.co...-media-queries/