0
Welcome Guest! Login
0 items Join Now

SOLVED Gantry 4 - Responsive Div Code - images and text

  • SOLVED Gantry 4 - Responsive Div Code - images and text

    Posted 8 years 10 months ago
    • On a site with Gantry 4 ( www.wealthlegacygroup.net/ ), I have been trying to change a 4 column table into div code so it will be responsive.

      This page has been helpful www.rockettheme.com/docs/joomla/basic/cr...esponsive_content.md , but has not solved things completely for me because it does not tell me how to put a combination of text and images into a gantry-width-block, gantry-width-spacer.

      This is the original code:

      <table style="width: 100%;">
      <tbody>
      <tr>
      <td width="25%"><img src="images/hp-tabs-services/inherit.png" alt="3" width="215" height="142" /><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=42&amp;Itemid=186">Inheritors</a></td>
      <td width="25%"><img src="images/hp-tabs-services/women.png" alt="3" width="215" height="142" /><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=43&amp;Itemid=187">Women &amp; Wealth</a></td>
      <td width="25%"><img src="images/hp-tabs-services/blended.png" alt="3" width="215" height="142" /><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=44&amp;Itemid=188">Blended Families</a></td>
      <td width="25%"><img src="images/hp-tabs-services/couples.png" alt="3" width="215" height="142" /><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=45&amp;Itemid=189">Couples</a></td>
      </tr>
      </tbody>
      </table>

      Here is the new code I am trying in every variation I can think of:

      <div class="row" class="gantry-width-100>
      <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
      <p><img src="images/hp-tabs-services/inherit.png" alt="inherit"><br>&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=42&amp;Itemid=186">Inheritors</a></p>
      </div>
      </div>
      <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
      <p><img src="images/hp-tabs-services/women.png" alt="women"><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=43&amp;Itemid=187">Women &amp; Wealth</a></p>
      </div>
      </div>
      <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
      <p><img src="images/hp-tabs-services/blended.png" alt="Blended Families"><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=44&amp;Itemid=188">Blended Families</a></p>
      </div>
      </div>
      <div class="gantry-width-25 gantry-width-block">
      <div class="gantry-width-spacer">
      <p><img src="images/hp-tabs-services/couples.png" alt="Couples"><br />&nbsp;&nbsp;&nbsp;<a href="index.php?option=com_content&amp;view=article&amp;id=45&amp;Itemid=189">Couples</a></p>
      </div>
      </div>
      <div class="clear"></div>
      </div>

      I have tried all combinations of <div class="row"> and <div class="rt-image"> and <div class="gantry-width-spacer"> and <p> to make this display into columns, but it insists on either displaying in rows or in putting a full-width frame around the images.

      Can anyone give me the correct code?

      TIA!
      Lisa
    • Last Edit: 8 years 9 months ago by Lisa Shimoni.
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: SOLVED Gantry 4 - Responsive Div Code - images and text

    Posted 8 years 9 months ago
    • Hi Lisa,

      Is this code in place on the site? Can you give a link to it?

      If the code is as your post then the first line is missing a closing " so would impact on all following code.

      Hope this helps 8)

    • 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
  • Re: SOLVED Gantry 4 - Responsive Div Code - images and text

    Posted 8 years 9 months ago
    • Hi David,

      Thanks for your reply!

      I added the quotes, but that did not fix the issue.

      Yes. You can see the page on the site (but it is a bit of a run about).

      On the homepage ( www.wealthlegacygroup.net/ ), under the slideshow, there is a Rokspocket Tabs module (clients, advisors...).
      The clients tab of that module loads a page with this code.
      The 4 images you are see under clients should be 4 columns (not rows) on the desktop that arrange themselves into rows on the phone.
      But as you can see, they are rows on the desktop due to my code.

      Perhaps my code is not working because I have both an image and text in each div 25 width. In the examples I found, it just either had image or text.

      TIA for any help you can give me!
      Lisa
  • Re: SOLVED Gantry 4 - Responsive Div Code - images and text

    Posted 8 years 9 months ago
    • David,
      Maybe best for me to just replace this module with a more responsive slider.
      Any suggestions?
      Best,
      Lisa
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: SOLVED Gantry 4 - Responsive Div Code - images and text

    Posted 8 years 9 months ago
    • Hi Lisa,

      The problem is that the code you have used is not included that template, hence no changes.

      Try adding the following code to your custom css file...

      /* Gantry Custom Width */
      .gantry-row {
      	margin: 0 -15px;
      }
      .gantry-width-container {
      	.flex-display(flex);
      }
      .gantry-width-spacer {
      	margin: 0 15px;
      }
      .gantry-block-center {
      	margin: auto;
      	float: none !important;
      }
      .gantry-width-10 {
      	width: 10%;
      }
      .gantry-width-20 {
      	width: 20%;
      }
      .gantry-width-25 {
      	width: 25%;
      }
      .gantry-width-30 {
      	width: 30%;
      }
      .gantry-width-33 {
      	width: 33.3333333333%;
      }
      .gantry-width-40 {
      	width: 40%;
      }
      .gantry-width-50 {
      	width: 50%;
      }
      .gantry-width-60 {
      	width: 60%;
      }
      .gantry-width-66 {
      	width: 66.6666666667%;
      }
      .gantry-width-70 {
      	width: 70%;
      }
      .gantry-width-75 {
      	width: 75%;
      }
      .gantry-width-80 {
      	width: 80%;
      }
      .gantry-width-90 {
      	width: 90%;
      }
      .gantry-width-100 {
      	width: 90%;
      }
      .gantry-width-block {
          display:block;
          float:left;
      }

      If this resolves your problem then please edit your first post in this thread by adding [SOLVED] at the start of the title and click on the icon and select the 'tick' icon. This lets the moderators know that it can be moved to the solved section.

      Thanks for your cooperation :)

    • 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
  • Re: SOLVED Gantry 4 - Responsive Div Code - images and text

    Posted 8 years 9 months ago
    • WOW David. You are a genius and a VERY helpful one. I was going around in circles like a crazy mouse, and you found the cheese which was right there in font of me.
      Thank you!
      Lisa

Time to create page: 0.053 seconds