Jump to content


Photo
- - - - -

Resolution Conditional Hiding of Elements?...

hide small resolution mobile customization conditional

  • Please log in to reply
5 replies to this topic

#1 casseysdesigns

casseysdesigns

    Advanced Member

  • Members


  • 30 posts
  • LocationTexas
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 19 April 2014 - 04:57 AM

I am using both the most recent version of wordpress and dms2.

The website where I am trying to apply the customization : http://traciwarren.com/

 

I have created an icon menu and placed it on the right of the screen, it is indexed to show on the top layer. However, I dont like the way it works on smaller devices no matter which way I style it. It is also troublesome when it comes to user friendliness on smaller screens because it interfers with menus and content. 

 

What I want to do :

Hide it on screens smaller than 1200px;

 

I did try @media only screen and (max-width:1200px) { #textbox { display:none; } } and multiple varations.

 

Any help would be appreciated. I am open to options that require more than css, I am just not sure where to start.

 

Thanks,

Cassey



#2 batman

batman

    Bat Learning

  • Members

  • 2084 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 April 2014 - 10:29 AM

Hi @casseysdesigns

Cassey, I´m not sure but you can try with

 

#textboxufzezj9 {
position: fixed;
top: 0px;
right: 0px;
    min-width: 350px;
    display: none;
}


#3 jmad

jmad

    Advocate

  • Members

  • 842 posts
  • LocationCentral Florida
  • Framework Version:DMS
  • Country: Country Flag

Posted 19 April 2014 - 01:19 PM

You might try something like this and apply custom class to the text box.

 

.custom-class {
  @media (max-width: 768px){
 display: none;
  }
}


#4 ellenmva

ellenmva

    Advocate

  • Members

  • 314 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 19 April 2014 - 01:49 PM

@casseysdesigns There are some utility classes included in DMS including hidden-phone and hidden-tablet. You'll find them under Visibility here, http://docs.pageline...l-css-utilities. Just add one of the classes under Standard Options of the section, Custom Styling Classes.

 

DMS_1_2___Just_another_WordPress_site.pn

 

Ellen


  • casseysdesigns likes this

#5 casseysdesigns

casseysdesigns

    Advanced Member

  • Members


  • 30 posts
  • LocationTexas
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 19 April 2014 - 04:09 PM

I did try the utility classes, however these do not work with all sections at this time. Thank you for the resource ;)

I was able to obtain the effect desired using the below code. Thank you all for your help working through this.

@media all and (max-width:1300px) {

#textboxid {

display:none;

}
}

#6 Danny

Danny

    Is Awesome!

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

Posted 20 April 2014 - 11:28 AM

You can use the options that come with the DMS Pro Tools plugin, when enabled, all sections have the following options:

 

https://cloudup.com/cxPGmjs9RWR







Also tagged with one or more of these keywords: hide, small resolution, mobile customization, conditional