• 0

Problem with visibility class


Question

Posted (edited) · Report post

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

.visible-desktop

Screencast preview what I did >>

http://www.screencast.com/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

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

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

Edited by rijans

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

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

Edited by rijans

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.com/css-media-queries/

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, got it! Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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://lovepattayathailand.com/best-pattaya-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,  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cheers Danny, top man!
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now