Jump to content

Archived

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

irfan khan

How to override media queries in DMS Pro

Recommended Posts

irfan khan    0
irfan khan

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
irfan khan    0
irfan khan

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

Share this post


Link to post
Share on other sites
irfan khan    0
irfan khan

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
Jake    74
Jake

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?


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
irfan khan    0
irfan khan

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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
irfan khan    0
irfan khan

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

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
irfan khan    0
irfan khan

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

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      hi all.
      my test site is located @ http://iloveoffset.flywheelsites.com/
      I am using out of the mediaBox boxes and love them however when viewed on an apple ipad (768x1024) they look very cluttered.
      Every other version of  tablet up to Google Nexus 7 (603 x 966) it works great as it display the mobile version, so every ibox and mediabox is 100% width, one under the other.
      If I want the ipad to display how a mobile version does, how do I do this?
      Thanks
      Lisa
      I suppose a quicker way of asking my question above is "is there a way to force an ipad to display the mobile version of your site"
       
    • 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/
    • amb62137
      By amb62137
      I am looking override media queries but can't seem to get them to work properly. I've added the following (with css styling):
       
      @media screen and (max-device-width: 480px) {
      */Styles/*

       
      But am unsure how to find out which style classes I need to add to make my site a 100% width on a mobile device. (Not mobile view)
       
      Any advice would be greatly appreciated! Thank you!
    • bloom1creative
      By bloom1creative+
      Hi guys.
       
      We all know there is no responsive support for IE6-8, which is a big problem when making sites for clients.  I have found the warning notice plugin for Wordpress which is infinitely useful, but in terms of the 'disable mobile' option on your framework, it works REALLY nicely to take away all of the responsive features of a site.
       
      Now my question: - Is there a way to enable this 'disable mobile' option for JUST IE 6-8, as these are the browsers that struggle the most with support for mobile and ideally are the most likely I would want to have the mobile disabled for.
       
      Many thanks
       
      Rob
×