Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Make area not visible on Mobile?

Recommended Posts

jmad+    80
jmad

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?

Share this post


Link to post
Share on other sites
jmad+    80
jmad

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

Share this post


Link to post
Share on other sites
Jake    74
Jake

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.
  • Like 1

Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
jmad+    80
jmad

Jake

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

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello jmad

 

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

×