0
Welcome Guest! Login
0 items Join Now

SOLVED responsive column codes acting weird.

    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    SOLVED responsive column codes acting weird.

    Posted 10 years 1 month ago
    • I'm getting a strange result with my attempt to build some columns in custom modules on the homepage of the site.
      ofoam.org/

      I'm trying to get two custom modules on top of each other in the showcase-a position.
      first module = 72/25
      second module = 25/75

      the problem I'm having is with the second module "Roots & Blues Festival"
      for some reason the columns aren't aligning correclty, even stranger is that if I give it a 50/50 or 40/60 I'm getting the alignment you would expect, but not at 25/75, the two columns are not floating correct.


      below is the code in my second showcase module


      <div class="gantry-width-25">
      <h2 style="text-align: center;">{gfont Alegreya SC; font-size:1.4em; text-shadow:2px 2px 2px #000;}August 21-23, 2015{/gfont}</h2>
      <p style="text-align: center;">{gfont Alegreya SC; font-size:1.2em; text-shadow:2px 2px 2px #000;}North Fork Park<br />Cutler Flats<br />Liberty Utah{/gfont}</p>
      </div>
      <div class="gantry-width-75">
      <h1 style="padding-bottom: 10px;">{gfont PT Serif;font-size:2em;}O{/gfont}{gfont PT Serif;font-size:1.6em}GDEN{/gfont} {gfont PT Serif;font-size:2em;}V{/gfont}{gfont PT Serif;font-size:1.6em}ALLEY{/gfont}</h1>
      <h1>{gfont Rye; font-size:2.9em; text-shadow:2px 2px 2px #000;}Roots &amp; Blues Festival{/gfont}</h1>
      </div>
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: SOLVED responsive column codes acting weird.

    Posted 10 years 1 month ago
    • You're not using all of the code needed... you're not defining the row (block) nor are you clearing after each row... depending which template you're using there are 2 versions of gantry-width-blocks... both are documented here: www.rockettheme.com/docs/joomla/basic/cr...tom-responsive-grids

      //if your template is vermilion or newer be sure and scroll down to the new flexbox code
    • Last Edit: 10 years 1 month ago by Matt.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    Re: SOLVED responsive column codes acting weird.

    Posted 10 years 1 month ago
    • Thanks for the reply Matt,
      I'm using Myriad template so I'm assuming the flexblox method applies to me.

      I reworked my code but it doesn't seem to be doing anything.

      does this look about right?


      <div class="gantry-row">
          <div class="gantry-width-container">
              <div class="gantry-width-25">
                  <div class="gantry-width-spacer">
      
      <h2 style="text-align: center;">{gfont Alegreya SC; font-size:1.4em; text-shadow:2px 2px 2px #000;}August 21-23, 2015{/gfont}</h2>
      <p style="text-align: center;">{gfont Alegreya SC; font-size:1.2em; text-shadow:2px 2px 2px #000;}North Fork Park<br />Cutler Flats<br />Liberty Utah{/gfont}</p>
      </div></div></div>
          <div class="gantry-width-container">
              <div class="gantry-width-75">
                  <div class="gantry-width-spacer">
      <h1 style="padding-bottom: 10px;">{gfont PT Serif;font-size:2em;}O{/gfont}{gfont PT Serif;font-size:1.6em}GDEN{/gfont} {gfont PT Serif;font-size:2em;}V{/gfont}{gfont PT Serif;font-size:1.6em}ALLEY{/gfont}</h1>
      <h1>{gfont Rye; font-size:2.9em; text-shadow:2px 2px 2px #000;}<a href="index.php?option=com_k2&amp;view=item&amp;layout=item&amp;id=238&amp;Itemid=458">Roots &amp; Blues Festival</a>{/gfont}</h1>
      </div></div></div>
      </div>
    • Lownotes's Avatar
    • Lownotes
    • Hero Rocketeer
    • Posts: 325
    • Thanks: 2

    Re: SOLVED responsive column codes acting weird.

    Posted 10 years 1 month ago
    • boom, that did it! I see where I closed the gantry-width-container too soon.
      I think I get it now.

      Thanks Matt
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: SOLVED responsive column codes acting weird.

    Posted 10 years 1 month ago
    • good deal :)

      when marking solved, make sure you're editing your very first/original post and are placing the word "solved" in brackets like: [SOLVED] in your post title... I'll tidy up here ;)
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:

Time to create page: 0.085 seconds