visible-desktop showing in visible-large
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
I have a header module with 4 images, each one in a separate DIV and assigned the class for each of the 4 visible classes as per the Gantry-Framework Documentation,
http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md
.
The problem is that on large display, 1200px and wider, the 'visible-desktop' class module is showing.
This is a redesign site but I've put it online.
http://wiregrassangelhouse.org/j25/news/archived
Here is the code for the 'top-a' module.
<div class="visible-large"> <img src="images/modules/top-a/header-large.jpg" alt="header" width="100%" height="200" /> </div> <div class="visible-desktop"> <img src="images/modules/top-a/header-desktop.jpg" alt="header" width="100%" height="200" /> </div> <div class="visible-tablet"> <img src="images/modules/top-a/header-tablet.jpg" alt="header" width="100%" height="200" /> </div> <div class="visible-phone"> <img src="images/modules/top-a/header-phone.jpg" alt="header" width="100%" height="200" /> </div>
The images widths are visible = 900, desktop = 720, tablet = 576 and phone = 480 but I've set them all to 100% for responsiveness.
This isn't the first time I've encounted this problem and if I try to use any combinations of the 'visible' and 'hidden' classes, it just causes more problems.
Any assistance would be greatly appreciated.
Luke - Just another old hacker!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
- BUMP! 16 views and no one has a suggestion? Help!!!
- Just another old hacker!
-
-
-
- Market Media
- Newbie
- Posts: 6
- Thanks: 0
-
Luke Douglas wrote:
BUMP! 16 views and no one has a suggestion? Help!!!Hey i've an idea - why not create 4 different modules and make them visible for appropriate sizes usig the module class suffix? That's how i do it instead of using one module and it seems to work
-
-
-
- Market Media
- Newbie
- Posts: 6
- Thanks: 0
- That way you could also use the hidden-desktop class suffix for your large module, right?
-
-
-
- Market Media
- Newbie
- Posts: 6
- Thanks: 0
-
Or probably i meant hidden-large suffix for your desktop module
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Market Media wrote:
Luke Douglas wrote:BUMP! 16 views and no one has a suggestion? Help!!!Hey i've an idea - why not create 4 different modules and make them visible for appropriate sizes usig the module class suffix? That's how i do it instead of using one module and it seems to work
Well, I've tried this but there is a small glitch. If I do this, for some reason, it will display both the 'visible-large' and 'visible-desktop' on large views. I submitted another post on this a few months ago but so far no luck in getting this resolved. Yes, I've cleared out all server cache and browser cache. I've tried Firefox, Chrome and IE. I will say this is 'not' consistent so I suspect there may be a Javascript conflict but I haven't been able to figure it out.
On sites where there is no conflict, individual modules with different 'visible' classes work fine.
Technology is great...................when it works.
- Just another old hacker!
-
-
-
- Market Media
- Newbie
- Posts: 6
- Thanks: 0
- Another hack solution might be to call in the services of advanced module manager - there you can play with different settings of where to show the various modules. That might/might not help?
-
-
-
- flatmatt
- Sr. Rocketeer
- Posts: 242
- Thanks: 5
-
I know this is an old post, but I found something that works for me:
First wrap your <div> in a the "visible-desktop" and then use a <span> tag inside with the "hidden-large" class.
Example:
<h4 class="visible-desktop "><span class="hidden-large">Anything here will not show up on the LARGE VIEW.</span></h4>
Hope that helps somebody. (If you have a better solution - let me know!)
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Just curious but did you try this and, if so, did it work?
<h4 class="visible-desktop hidden-large">Anything here will not show up on the LARGE VIEW.</h4>
- Just another old hacker!
-
Time to create page: 0.054 seconds