Jump to content


Photo
- - - - -

How to override media queries in DMS Pro

media queries

Best Answer Danny , 16 October 2013 - 01:22 PM

The visibility/hidden classes will not work on sections styling classes field, I have reported this as a feature enhancement on our tracker. You can use these classes in HTML and on the Full Width section.

 

Therefore, if you want to hide a specific section on a specific device, drag a Full width section area then add the class to the styling classes field.

 

Another way, would be to use a custom class and then use @media queries.

 

For example.

 

Go to the section you wish to hide on a mobile device, in the styling classes field, add the following class name.

 
hidy-phone

Click publish. Now go to DMS Toolbar > Custom Code > Custom CSS/LESS editor and add the following:

 
@media (max-width: 767px) {
  #site .hidy-phone {
    display: none;
  }
}

Click publish and refresh, when the site reloads, reduce your browsers window size and the section that has the hidy-phone class should no longer be visible. You can apply this class to any sections you like.

Go to the full post


  • Please log in to reply
12 replies to this topic

#1 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 11 October 2013 - 09:04 AM

Hi Team,

I see all the CSS in DMS has media="all". I do not want to display few sections on Mobile view while they should get displayed on Desktop. I tried writing following code snippet in Custom LESS/CSS, but it did not work.

@media screen and (min-width: 640px){

 

How can I achieve this with DMS?

 

Also I have bought Pagelines DMS Developer license. But still do not have access to Technical Support forum. Please provide same.

 

Thanks.



#2 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 11 October 2013 - 09:11 AM

My DMS Developer License username is Paarami2028. Please provide access to Forum.



#3 Danny

Danny

    Is Awesome!

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

Posted 11 October 2013 - 11:12 AM

There is no need to overwrite the default media queries, you can use the custom classes instead - http://docs.pageline...l-css-utilities

#4 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 14 October 2013 - 04:34 PM

Thanks for reply. I used hidden-phone class for a Media Component under Section Options. But it is not working. I still can see the image in mobile phone view. Please suggest. 



#5 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 14 October 2013 - 05:47 PM

Hi @irfan khan - I'd like to first address your issues with forum access which should be fixed at this point. Please log out of the forum and then log back in again and I believe you'll find you are able to access the Pro Forums. If that's still not the case, please let us know and my apologies for the delay.

 

Could you provide a link to the site in question and perhaps a bit more detail about where you entered the code?



#6 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 14 October 2013 - 06:23 PM

Hi I am still not be able to access Dev Pro forum. 

 

about my query: site reference is http://paarami.in/mobiletrial

 

Here, in header section there are 3 media boxes with 3 images - Gaming, Media, Transaction. 

I want to hide these in mobile view.

 

I clicked on Edit for Gaming media box, and in Styling Classes enter hidden-phone. Published, refreshed & resized browser to mobile resolution. I am expecting that Gaming will get hidden, but its still showing the image. Please suggest.

Don't know how to attach screenshot here. 



#7 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 15 October 2013 - 04:18 AM

Please suggest.



#8 Danny

Danny

    Is Awesome!

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

Posted 15 October 2013 - 11:40 AM

Hi,

 

If you can't access the developer forum, please logout of the forum, clear your cookies and then login here - http://www.pagelines.com/my-account/

 

This should sync your account with your forums account, if that doesn't work, it generally means you're using a different email address for each. If you still encounter an issue, please contact our helpdesk, as they're the only ones who can address your issue - hello at pagelines dot com

 

Regarding your hidden-phone, this seems to be a minor bug which I have supported. In the meantime you will need to override the media queries.



#9 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 16 October 2013 - 06:32 AM

Hi I still did not get the solution for hidden-phone problem.

Can you please explain step by step how to implement hidden-phone and other visibility utility classes. 

 



#10 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 16 October 2013 - 11:43 AM

Please find attached video:    http://screencast.com/t/hbQDYnj5B



#11 Danny

Danny

    Is Awesome!

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

Posted 16 October 2013 - 01:22 PM   Best Answer

The visibility/hidden classes will not work on sections styling classes field, I have reported this as a feature enhancement on our tracker. You can use these classes in HTML and on the Full Width section.

 

Therefore, if you want to hide a specific section on a specific device, drag a Full width section area then add the class to the styling classes field.

 

Another way, would be to use a custom class and then use @media queries.

 

For example.

 

Go to the section you wish to hide on a mobile device, in the styling classes field, add the following class name.

 
hidy-phone

Click publish. Now go to DMS Toolbar > Custom Code > Custom CSS/LESS editor and add the following:

 
@media (max-width: 767px) {
  #site .hidy-phone {
    display: none;
  }
}

Click publish and refresh, when the site reloads, reduce your browsers window size and the section that has the hidy-phone class should no longer be visible. You can apply this class to any sections you like.



#12 irfan khan

irfan khan

    Advanced Member

  • Members

  • 33 posts
  • Framework Version:version 2.1.2
  • Country: Country Flag

Posted 17 October 2013 - 06:30 AM

Thanks. This should work. I will try. 

Also please let me know when you launch visibility utility classes for all sections.



#13 Danny

Danny

    Is Awesome!

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

Posted 17 October 2013 - 08:51 AM

Well this currently has no ETA and I am not sure whether it will be included or not. You can follow it here - https://github.com/p.../DMS/issues/475







Also tagged with one or more of these keywords: media queries