• 0

How to override media queries in DMS Pro


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Please suggest.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks. This should work. I will try. 

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

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