Jump to content


Photo
- - - - -

Problem with visibility class

.visible-desktop visibility element phone tablet

Best Answer Danny , 13 March 2014 - 03:20 PM

Go to Wordpress Admin Dashboard > PageLines Pro and then check the Allow Hidden Sections - http://cl.ly/image/0b0c2z1N302q

 

Then go to your front end and then click the edit tool on any of your sections and you will now see the following options:

 

http://cl.ly/image/101r1E2n2i1X

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 127 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 13 March 2014 - 09:17 AM

I used a visibility class (found in http://docs.pageline...l-css-utilities) with a mediabox section on my site. Following the class>>

.visible-desktop

Screencast preview what I did >>

http://www.screencas.../t/IkMxLkiNpaB7

 

Now visible-desktop means the section/element will be visible only on desktop screen and will be hidden in tablet and phone screen. Right????

But the section gets shown on Phone screen!!! Check this out>>

 http://screencast.com/t/jLsUQ6O0b

 

I also checked this out on Chrome for Android, and same happens!!

Am I wrong somewhere? Why it is visible on phone?

Site:TechGainer.com


Edited by rijans, 13 March 2014 - 09:18 AM.


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 March 2014 - 02:53 PM

Hi,

 

Those utility classes will not work when used on sections, they will only work on your own HTML for example:

 

<div class"visible-desktop">

<h1>Hello World!</h1>

</div>

 

If you want to hide/show sections, then you will want to use the DMS Pro Tools option instead. When the DMS Pro Tools plugin is active, it adds this kind of functionality to all sections.



#3 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 127 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 13 March 2014 - 02:58 PM

DMS Pro Tools plugin is active because I have already DMS Pro Tools plugin installed! So?


Edited by rijans, 13 March 2014 - 03:11 PM.


#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 March 2014 - 03:20 PM   Best Answer

Go to Wordpress Admin Dashboard > PageLines Pro and then check the Allow Hidden Sections - http://cl.ly/image/0b0c2z1N302q

 

Then go to your front end and then click the edit tool on any of your sections and you will now see the following options:

 

http://cl.ly/image/101r1E2n2i1X



#5 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 127 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 13 March 2014 - 03:41 PM

Working on real phone! But not working for responsive screen(I mean if I make the browser window smale like phone)


Edited by rijans, 13 March 2014 - 03:41 PM.


#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 March 2014 - 11:26 PM

Hi there, the classes when the browser is resized will still show it as the desktop, so unless it's actually viewed on a phone then it won't hide. To hide on a desktop when the browser is resized you'll need to use @media queries.

 

Example below, change the sizes to fit when you want the item to disappear:

 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
Your css goes in here...
}
}

 

http://css-tricks.co...-media-queries/


  • rijans likes this

#7 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 127 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 17 March 2014 - 06:19 AM

Hi, got it! Thanks!







Also tagged with one or more of these keywords: .visible-desktop, visibility, element, phone, tablet