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
13 replies to this topic

#1 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 170 posts
  • LocationDhaka, Bangladesh
  • Framework Version:DMS 2.x
  • 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
  • 19801 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
  • 170 posts
  • LocationDhaka, Bangladesh
  • Framework Version:DMS 2.x
  • 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
  • 19801 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
  • 170 posts
  • LocationDhaka, Bangladesh
  • Framework Version:DMS 2.x
  • 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

  • DMS Subscriber†
  • 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
  • 170 posts
  • LocationDhaka, Bangladesh
  • Framework Version:DMS 2.x
  • Country: Country Flag

Posted 17 March 2014 - 06:19 AM

Hi, got it! Thanks!



#8 onlinedesigns4u†

onlinedesigns4u

    Advanced Member

  • DMS Subscriber†
  • 67 posts
  • LocationPattaya
  • Country: Country Flag

Posted 24 February 2015 - 03:44 AM

Hi Guys, bit of an old thread but ill post it hear anyways.

 

I have some sections i want hidden on Mobile phones. I have read the responses here and tried using DMS pro tools as suggested buy danny but unfortunately its hiding the sections on ipads as well, which i dont want.

 

I have a restaurant page which is made up of 3 columns. The content being in the middle with the other columns either side housing some iboxes. Although it looks good on desktop and ipads, this layout doesnt really work on mobile phones. On a phone the content in the left column is first, then the middle column then the right column.

 

This layout doesnt work for the page on mobiles so id like to hide the iboxes used in the columns either side of the content. So when a visitor uses the page on their phone the first thing they see is the main content, then below we have our restaurant listings.

 

http://lovepattayath...ya-restaurants/

 

At first i tried using the visibility classes  hidden-phone but after reading the comments in the thread i realised it was the wrong approach. Shame the Pro tools dont take it further and stipulate what device to be hidden on, not just mobile which unfortunately accounts for mobile phones and ipads.

 

Any help or suggestions would be appreciated.

 

Thanks for your time,  



#9 Danny

Danny

    Is Awesome!

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

Posted 24 February 2015 - 01:46 PM

The Hide on mobile is using the WordPress function which includes all mobile devices. Therefore, if you want to hide a specific section on a phones, you will need to use give that section a unique class and apply that class to a media query.



#10 Claude203†

Claude203

    Super Member

  • DMS Subscriber†
  • 185 posts
  • LocationGreenwich, CT
  • Country: Country Flag

Posted 25 February 2015 - 07:54 PM

Danny, I am using DMS Pro, selected "Hide this section for mobile users" and the section (Hover) still shows up on mobile. I tried adding/removing "visible-desktop" as a custom class but that makes no difference. Either way, the section is still visible on iPhone. Is there anything else I could/should try? Thank you.

 

UPDATE: Several tries later and now the section is hidden after all. Solved. It works. Thank you.



#11 onlinedesigns4u†

onlinedesigns4u

    Advanced Member

  • DMS Subscriber†
  • 67 posts
  • LocationPattaya
  • Country: Country Flag

Posted 26 February 2015 - 12:01 PM

Cheers Danny, can you recommend any documentation for me to follow? Ive not done this before. Cheers



#12 Danny

Danny

    Is Awesome!

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

Posted 27 February 2015 - 02:21 PM

Read through these articles and you will be a media queries ninja:

 

https://developer.mo...S/Media_queries

http://www.w3schools..._mediaquery.asp

https://css-tricks.c...andard-devices/

Also check out this, may be useful - http://mobileweb.codeschool.com/



#13 onlinedesigns4u†

onlinedesigns4u

    Advanced Member

  • DMS Subscriber†
  • 67 posts
  • LocationPattaya
  • Country: Country Flag

Posted 28 February 2015 - 09:46 AM

Cheers Danny, top man!
 



#14 Danny

Danny

    Is Awesome!

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

Posted 01 March 2015 - 02:44 PM

No problem.







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