0
Welcome Guest! Login
0 items Join Now

SOLVED Add extra Responsive class for large displays

Last Post
Search Topic
    • genegun's Avatar
    • genegun
    • Rocketeer
    • Posts: 56
    • Thanks: 0

    Re: SOLVED Add extra Responsive class for large displays

    Posted 12 years 1 week ago
    • Using CSS validator , I have compared the content of the mediaquerries.css from the Gantry demo and from the latest Gantry template archive (v.4.1.2). The .large class is indeed in the former, but no mention is made of it in the latter file.

      gantry-core.less does have the .large class in it.

      So I have copied the content of mediaquerries.css lifted off the Gantry demo site to the mediaquerries.css in my own instal, emptied all template caches, reloaded the page, but still my module with the visible.large class displays on smaller screen sizes.

      Did I miss something? Henning, could you please send me the two files so I can replace them in my instal by any chance?

      Thanks!

      EDIT: with a bit more time, it seems that whatever cache emptied and now the module is behaving as expected!
    #892181
    • Luke Douglas's Avatar
    • Luke Douglas
    • Hero Rocketeer
    • Posts: 322
    • Thanks: 15
    • Another Old Hack!

    Re: SOLVED Add extra Responsive class for large displays

    Posted 11 years 2 months ago
    • Henning,

      I had created a test page, webbering.com/test-page , which reflected problems with the 'visible-large', 'hidden-large' and 'hidden-desktop' class. However, once I read the post from 'genegun' above, I downloaded the 4.1.16 version of the Gantry template, extracted and uploaded the 'mediaqueries.less' file in the 'less' folder. That resolved the 'visible-large' and 'visible-hidden' problem. However, the 'visible-desktop' and 'hidden-desktop' was still displaying and not displaying properly on the 'large' display (min-width: 1200px). In looking at the code in the mediaqueries.less file, it had been edited incorrectly. I swapped the declarations for '.visible-desktop' and '.hidden-desktop'. This works as you can see on my test page. First time I've ever gotten it to work completely! :cheesy:
      // Large Mode
@media only screen and (min-width: 1200px) {
    .visible-large {
        display: inherit !important;
    }
    .hidden-large {
        display: none !important;
    }
    .visible-desktop {
        display: none !important;
    }
    .hidden-desktop {
        display: inherit !important;
    }
}

      These changes will also have to be made to the 'mediaqueries.css' file in the 'css-compiled' sub-folder.

      You might want to pass on this code change to the developers.

      What this tells me is that simply updating a template does not update properly as this is a template that I have updated to the most recent version several times over the past year and a half. This is a fundamental problem that should be corrected. All core files should be updated period as custom files would not be affected. Apparently, it has not been updating the mediaqueries.less file.

      Thanks to 'genegun' for making me aware of this problem.

      Luke
    • Just another old hacker!
    #1013761

Time to create page: 0.074 seconds