Using rt-grid in modules and content
-
-
- Brent Critchfield
- Sr. Rocketeer
- Posts: 131
- Thanks: 7
-
I've been using gantry-width-XX styles for my responsive grids, but since they're percentage based the elements don't line up directly on the grids for the template. The templates use rt-grid-X classes, but when trying to use those inside content or modules I can't get the full 12-columns since the margins push the last grid below the rest of the row. I'm using the rt-alpha and rt-omega classes but that doesn't seem to help.
Is there a way to make this work?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
1. do not use rt-grid classes in your own content - they are the gantry grid classes that control the structure of the page.
2. yes the gantry-width-xx classes are percentage based (as they have to be to work in a responsive template) - I don't understand what your alignment issue is can you elaborate more and perhaps provide an example link to your issue
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.
-
-
-
- Brent Critchfield
- Sr. Rocketeer
- Posts: 131
- Thanks: 7
- Here's a screenshot from a site that I'm working on at the moment. The module that you can see on the top-right side is placed with rt-grid styles, so it aligns to the overall grid. The content below it is placed with gantry-width, so while it's responsive, it doesn't line up with the site grid. Ideally I'd like to be able to write custom content that does line up with the grid to keep that alignment flowing throughout the page.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
i can't debug a screenshot - I need to see your site live.
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.
-
-
-
- Brent Critchfield
- Sr. Rocketeer
- Posts: 131
- Thanks: 7
- The draft site is at thestocktonautomall.silo1.bvpdesign.com/
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Why can't you just add module class suffix " nomarginall nopaddingall" to that 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.
-
-
-
- Brent Critchfield
- Sr. Rocketeer
- Posts: 131
- Thanks: 7
-
You mean using rt-grid styles in my custom content? I tried "nomarginall nopaddingall" on the module, but it still drops down to a second row.
Just to be clear, my code inside the footer module is as follows:
<div class="gantry-width-20"> <div class="gantry-width-spacer alpha"> <div class="rt-image"> GOOGLE MAP </div> </div> </div> <div class="gantry-width-50"> <div class="gantry-width-spacer"> PROMO TEXT </div> </div> <div class="gantry-width-30"> <div class="gantry-width-spacer omega"> COPYRIGHT NOTICE </div> </div>
What I want is to be able to use this so that it aligns to the grid:
<div class="rt-grid-2 rt-alpha"> <div class="rt-block"> GOOGLE MAP </div> </div> <div class="rt-grid-6"> <div class="rt-block"> PROMO TEXT </div> </div> <div class="rt-grid-4 rt-omega"> <div class="rt-block"> COPYRIGHT NOTICE </div> </div>
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
I have already said DO NOT use the rt-grid classes or any of the other framework specific class such as rt-block, rt-container etc.
You are going about this the wrong way. What your currently have as one module should infact be 3 modules. one assigned to footer-a one in footer-b and one in footer-c. Then, if you don't want padding or margins around the content of these modules you can add module class suffixes " nomarginall nopaddingall". You can then, in template manager > layout tab, alter the layout of the grid for 3 published as you wish using the layout slider.
The gantry-width-xx classes are meant for sub-dividing a gantry grid position whether that be in and article in the mainbody or a module assigned to a position.
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.
-
-
-
- Brent Critchfield
- Sr. Rocketeer
- Posts: 131
- Thanks: 7
-
Mark, thanks for your help. I do understand that technically this should be three modules, however it's easier for me to write the code and build the layout myself than it is to create three modules and then have to adjust the layout using the Template Manager. I also do this type of thing on a regular basis in content articles, so I'm trying to find a solution that retains the alignment to the grid while giving me the flexibility in layout that I'm looking for. I realize that rt-grid classes are reserved for Gantry layout, and the gantry-width classes are percentage based and will not lock up to the grid columns.
So maybe what I'm trying to accomplish isn't possible within the default styles available with Gantry? I may look into trying to create my own grid system that follows the principles of Bootstrap while still being able to work with Gantry and RT templates. Something to look at someday when I have nothing to do, which at this rate will be in about 10 years.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Well, I have to disagree. Creating three modules and changing one slider once in template manager is certainly not an onerous task.
On the other hand, creating lots of classes, CSS and HTML code to replicate everything that Gantry (or bootstrap) does for you seems to me a huge undertaking that I can not see the point of at all.
Any way if you really do want to do it the you'll need to:
1. create your own HTML using DIVs with class names of your own choosing. Remember also to add "clear" DIVS to cancel floats.
2. For the class names you have utilised in one above you'll have to set FIXED dimensions to those DIVS. but see...
3. Because gantry supports reposnive behaviour you'll have to alter your fixed dimensions for each of the viewport sizes that gantry supports using media queries. These are the media queries you will need:4. on you modules where you do this add module class suffix " nomarginall nopaddingall" so you get control of the full-width of the container, presumably also as you want to do everything yourself you would never utilise anything other that the one position within a position are either (e.g. for header - just header-a) otherwise you won't have full control over the space./* Smartphones */ @media (max-width: 480px) { } /* Smartphones to Tablets */ @media (min-width: 481px) and (max-width: 767px) { } /* Tablets */ @media (min-width: 768px) and (max-width: 959px) { } /* Desktop */ @media (min-width: 960px) and (max-width: 1199px) { } /* Large Display */ @media (min-width: 1200px) { }
I have to say for me this is a very strange request. Why would you use gantry, and a gantry template, only to want to then create your own "pseudo-gantry" within gantry? Seems like you're building an awful lot of overhead for something that your don't want.
Anyway, of course it's your decision, I hope the tips above help you.
Regards, Mark. -
The following users have thanked you: Brent Critchfield
- 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.059 seconds