0
Welcome Guest! Login
0 items Join Now

SOLVED Responsive Columns - Old Style in Gantry 5

Last Post
Search Topic
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    SOLVED Responsive Columns - Old Style in Gantry 5

    Posted 8 years 6 months ago
    • I have a question regarding the instructions found on this thread.
      www.rockettheme.com/forum/gantry5-for-jo...antry-5?limitstart=0

      I'm in a similar situation and have followed the instructions but getting some strange results.

      1) In the above thread the MOD suggests grabbing CSS and example from here:
      www.rockettheme.com/docs/joomla/basic/cr...tom-responsive-grids

      This page has two examples. Which is the correct one to use? I'm guessing the first example, which is sort of working for me.


      2) My text is not wrapping in the cells, but rather it is bleeding over the cells. Unfortunatly I cannot show the dev site but I will try to get a screen grab.

      Here is my module code:

      <div class="gantry-row">
<div class="gantry-width-container">
<div class="gantry-width-25 gantry-width-block" style="text-align: center; padding:15px;">
<div class="gantry-width-spacer gantry-width-block"><p><img src="images/logos-/logohorse.png" alt="logo  horse" /><br />Money transfers originating in the U.S. with destinations to Latin America, The Caribbean and The Philippines. </p> </div>
</div>
<div class="gantry-width-25 gantry-width-block" style="text-align: center;">
<div class="gantry-width-spacer gantry-width-block"><img src="images/logos-/logo-globe.png" alt="logo  globe" /><br />Money transfers originating in the U.S. and Europe with destinations in Europe, Asia, South Asia, Middle East, and Africa. </div>
</div>
<div class="gantry-width-25 gantry-width-block">
<div class="gantry-width-spacer gantry-width-block" style="text-align: center;"><img src="images/logos-/logo-small.png" alt="logo reymesa small" /> <br />Money transfers originating in the U.S. with destinations to Latin America and The Caribbean.</div>
</div>
<div class="gantry-width-25 gantry-width-block">
<div class="gantry-width-spacer gantry-width-block" style="text-align: center;"><img src="images/logos-/logo--globe.png" alt="logo sigue globe" /><br /> Global provides service to Europe</div>
</div>
</div>
</div>
<div class="clear">&nbsp;</div>

      This is what I added to my custom css.

      /* -------------------------  Demo Responsive Grid ------------------------------- */
    .gantry-width-block {
        display:block;
        float:left
    }
    .gantry-width-spacer {
        margin:15px
    }
    .gantry-width-20 {
        width:20%
    }
    .gantry-width-25 {
        width:25%
    }
    .gantry-width-30 {
        width:30%
    }
    .gantry-width-33 {
        width:33.33%
    }
    .gantry-width-40 {
        width:40%
    }
    .gantry-width-50 {
        width:50%
    }
    .gantry-width-60 {
        width:60%
    }
    .gantry-width-66 {
        width:66.66%
    }
    .gantry-width-70 {
        width:70%
    }
    .gantry-width-75 {
        width:75%
    }
    .gantry-width-80 {
        width:80%
    }
    #1245261
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED Responsive Columns - Old Style in Gantry 5

    Posted 8 years 6 months ago
    • If this is a site that is online (just installed, dev or live) could you please supply a link in the Public or SECURE part of your reply so we can better diagnose the issue?
      It makes our suggestions more accurate if we see the actual coding of your site.
      This is especially important with RokSprocket as our templates carry an override folder to modify the native styling.
    #1245387
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    Re: SOLVED Responsive Columns - Old Style in Gantry 5

    Posted 8 years 6 months ago
    • Thank you Dan,

      Here is a secure link. I'm talking about the columns that are in the dropdown menu "Brands".

      On a side note you'll see that I used an icon particle in one dropdown, but not able to do that in the other because I need to use png images instead of icons. It sure would have been sweet if the icon strip particle had support for icon or img, then I wouldn't be doing what I'm doing right now.
    • Last Edit: 8 years 6 months ago by Lownotes.
    #1245488
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    Re: SOLVED Responsive Columns - Old Style in Gantry 5

    Posted 8 years 6 months ago
    • I figured out the problem with the text overflow. There was a white-space:nowrap override as part of the menu css. I set the white-space:normal and all is good.
    #1245555

Time to create page: 0.046 seconds