Gantry 5 and responsive classes for modules
-
-
- StrataCorps
- Rocketeer
- Posts: 88
- Thanks: 1
-
I am having a problem with Gantry and using the responsive classes to hide/show content for Joomla modules.
In the past, I would use the module class suffix to add "visible-phone" or "hidden-phone" etc.
The problem now with Gantry 5 is that the suffixes are not applied to the Gantry <div> class for "platform-content" ... which is wrapped around the module.
What ends up happening is that the padding and margin settings of the template are applied to the <div class="platoform-content"> which creates white space on the template when the module should have been hidden.
For example, on a module assigned, I have a suffix visible-phone which should hide the module on the desktop.
<div class="platform-content"><div class="moduletable visible-phone box-blue">
<div class="moduletable visible-phone"><p>Hidden content from non-mobile devices</p></div>
</div>
But what happens is that the padding and margin values for class "platform-content" result in a huge waste of space even though the module is not displaying.
How do I eliminate this?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You should put "no margin" and "no padding" block variation on the module position particle on the layout and/or use the responsive support classes on the module position particle rather than the module.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- StrataCorps
- Rocketeer
- Posts: 88
- Thanks: 1
-
So are you telling me with Gantry 5 that I have to create multiple module positions for each individual module for the same position on the template? That doesn’t seem very efficient.
I don’t want the entire template position controlled...I want the individual modules assigned to the same position each to have thier own condition as every other template has done. The control should be within the Joomla module for a position in the template.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Nope that's not what I'm telling you at all.
Any particle on the layout will get margin and padding around it by default. Now if that particle happens to be a module position and you assign into it a module that you then subsequently hide with a responsive support class then then the position will still have that margin and padding around it because there could be many other module assigned to that same position that are not hidden.
So, I suggested that you remove the margin and padding from the particle (module position) on the layout by adding a block variation of "no margin" and "no padding", then if you want margin and padding on the actual module instead then you can add that as a module class suffix or a class of your own creation. In this way if there is only one module assigned to the position that is subsequently hidden by a responsive support class then the position itself will not be occupying space.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- StrataCorps
- Rocketeer
- Posts: 88
- Thanks: 1
-
I think I'm grasping Gantry 5's approach, so remove all padding and margins from the particle "Module position" and pad the individual modules as needed. Which was an obvious choice I made in earlier testing, however the issue prevails:
In the module position particle, I have No Padding and No Margin ... and two modules assigned to that position...yet the module that is hidden, the css for platform-content still shows up...
<div class="platform-content"><div class="moduletable visible-phone box-blue">
...module content...
</div>
And in the CSS for that class, it still has:
.platform-content, .moduletable, .widget {
margin: 0.625rem 0;
padding: 1.5rem 0;
}
This is coming from the template supra_22.css on line 1446 for the div class platform-content. I have even tried putting No Padding and No Margin on the Section itself as well. No matter what, platform-content gets a padding top/bottom of 24px for every module placed into that position particle which creates the unwanted white space around the hidden, invisbile module(s)
I'm sure I'm overlooking something else since this appears to be a simple matter, but what I don't know. - Last Edit: 7 years 7 months ago by StrataCorps.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
In this particular template the designers have elected to space all content out more. You can negate that with this...
.platform-content { margin: 0; padding: 1rem; }
But that will effect all viewport sizes. You could even set padding to zero but you may then find that some elements overlap as other aspects of the design of this template use negative margins for other content.
You cannot change this specifically on the "hidden" content because the container is the parent of the "hidden" content and the padding is on the parent - there is no CSS command that will zeroise padding/margins on a prent container dependent upon the child content.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- StrataCorps
- Rocketeer
- Posts: 88
- Thanks: 1
-
so I was correct. to me this is a “bug” or a significant flaw in the design. if you hide something, the element and its designed container should be hidden as well. to my knowledge this is NOT intentional and a significant oversight or it would have been clearly documented.
is this the first, and only template with this obsurd design or is this something within Gantry?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
It's not a bug - it's the design. Even in Gantry 4 the container was never truly hidden - it was always there in the output.
Different templates do different things so I couldn't tell you off-hand which does what.
But I have given you a workaround for the issue anyway with some CSS?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- StrataCorps
- Rocketeer
- Posts: 88
- Thanks: 1
-
I am sorry, but this is not a work around. when I post to a forum I always try and be constructive but to me this excuse is laughable. I have been using Rockettheme templates for projects for quite some time and to my knowledge this is the first time since the introduction of responsive design elements that I have ever seen this type of behavior–where there is mandatory spacing for a module injected without consideration of the platform’s [module] parameters itself. Forget responsive design, even using a tool like Modules Anywhere will result in added spacing for each module exluded from view based on conditions.
this is sloppy. the only workaround is to move to a different template. if this is what is expected of the future of Gantry 5x, where the platform itself loses to a framework, then I will also be moving away from the framework.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I will be sure to pass on your comments to our developers. We try to provide the best designs that meet the needs of most of our membership. But we can't make templates that meet the unique requirements of every site for every member and that is why it's sometimes necessary to use custom CSS (for which we offer support in this forum as I have done).
If you feel strongly about this the please feel free to make a complaint to our support department using the "contact us" link at the bottom of this page.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.058 seconds