Jump to content

Archived

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

rijans

Problem with visibility class

Recommended Posts

rijans    5
rijans

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


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rijans    5
rijans

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


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rijans    5
rijans

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


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
James B    436
James B

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/

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rijans    5
rijans

Hi, got it! Thanks!


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
onlinedesigns4u+    1
onlinedesigns4u

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203    12
Claude203

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.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
onlinedesigns4u+    1
onlinedesigns4u

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
Danny    1,327
Danny

Share this post


Link to post
Share on other sites
onlinedesigns4u+    1
onlinedesigns4u

Cheers Danny, top man!
 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • hibbsy78
      By hibbsy78+
      I think it would be good to make the element section buttons a little neater on mobile. 
      A gap between the two Both buttons centred correctly https://www.hibbslupustrust.org/donate/
       

    • mikeeg8
      By mikeeg8+
      Hello,
      Is there a quick way to show/hide things on mobile and desktops please, i.e. like a shortcode or similar?
      I've used a bit of code, but wondered if that was the mode elegant way - is there something built into a media box, for example that would give me a hide on desktop toggle?
      Thank you
    • Mats
      By Mats
      Hi,
      I have a problem if you look at the website below it looks fine on a PC, laptop or a tablet. However when you use a phone the Quickslider animation appears too small. Is it possible to not show the Quickslider animation in the mobile version or replace it with another picture or animation? How do I do that? I have been looking into visibility, media queries and even viewport but can not find any answers to my problem.
      http://www.stallhultman.se/
    • MooiWeb
      By MooiWeb
      Hello,
       
      I'm using DMS2 and the phone view off the template is different than te view on my ipad or desktop.
      I don't know where to change this?
       
      Regards,
      Edwin Mooi
      nieuw.vazdias.nl
    • info27
      By info27
      hi,
      i've got the following problem: only on mobile (tested on ipad) the masonic gallery starts displaying images (masonry display) as usual, but i doesn't complete positioning, and the images freeze in the starting position, one overlaying the other. reloading the page will make the system work as usual.vexample url: http://www.ido.it/collezione/baby-boy/
       
      any hints to solve the problem?
       
      ths,
      s.
×