gantry width class
-
-
- Sean Ryan
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
-
Hi,
On many of your templates you apply classes to your div's to create responsive columns within a module or article. eg <div class="gantry-width-35 gantry-width-block rt-block box2"
While for the most part these work well I sometime hit issue for example:
I have 2 divs one set to gantry-width-35 and the other to gantry-width-60 with style margin set to auto on both. This works fine but how can I center the content inside each div?
Check out "How does it work" on this site www.constructionwebsites.net.au/
In short is there any place I can find documentation on the classes
Regards
Sean
-
-
-
- Sean Ryan
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
-
Henning thanks for the reply. 40/60 fixes the overall layout of this div but my form looks odd with a 40/60 ratio.
The odd think is that if I set the ratio to 35/65 the roksproket module jumps below the form.
Is there any documentation so I can understand how these classes work?
These classes make the rocket themes very flexible for responsive design and I am surprised that cannot find any information about them.
Regards
Sean
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
the problem the class
.gantry-width-35
does not exist in the css
if you would add it like
.gantry-width-35 {
width: 35%;
}
you would will not like the result.
I'm not sure what looks wrong with 40/60?
You can set up you own classes to get more control over the widths ...
-
-
-
- Sean Ryan
- Jr. Rocketeer
- Posts: 26
- Thanks: 0
-
Hi Henning,
I am happy to use 40/60 as it has the best responsive results.
Is there any where I can see what classes DO exist in the css?
Also can you recommend the best solution for a 3 column layout using the gantry width class
Thanks
Sean
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
just as an example ...
<div class="gantry-width-block gantry-width-20">
<div class="gantry-width-spacer">
some content
</div>
</div>
<div class="gantry-width-block gantry-width-60">
<div class="gantry-width-spacer">
some content
</div>
</div>
<div class="gantry-width-block gantry-width-20">
<div class="gantry-width-spacer">
some content
</div>
</div>
<div class="clear"></div>
-
Time to create page: 0.081 seconds