[Jared NParticipant]

I’m trying to place columns within columns, or if you can provide a suggestion to an alternative, that would be great.

The shortcode setup I’m using is…

[content_band no_margin="true" padding_top="100px" padding_bottom="100px" inner_container="true" bg_image="http://dev2webfrogs.wpengine.com/wp-content/uploads/2014/01/leauges-955x634.jpg" border="none" parallax="true"] [container] [column type="whole" last="true" fade="true" fade_animation="in"][/column] [/container] [/content_band]

[content_band inner_container="true" no_margin="true" border="none" padding_top="10px" padding_bottom="30px" bg_pattern="" bg_image="" parallax="true" bg_video="" bg_video_poster="" bg_color="#333333"] [container]

There's some content here

[/container]
[/content_band]

[content_band no_margin="true" inner_container="false" bg_color="#999999" padding_top="0px" padding_bottom="0" border="none"]

[column type="one-third" fade="true" fade_animation="in-from-right" fade_animation_offset="2000px"]
[image class="man" src="http://placehold.it/500x800" alt="Alt Text"]
[/column]
[visibility type="visible-phone"]
[gap size="45px"]
[/visibility]

[custom_headline class="h-resp" style="color: #fff;" level="h3"]FOR THOSE WHO ENJOY THE SPORT OF BOWLING, FLIPSIDE IS HERE FOR YOU.[/custom_headline]
<p class="p-resp">We house 28 lanes and maintain them with state of the art equipment. This will ensure that those pesky lane conditions that may have been an issue at other centers are a non-issue here.</p>
[custom_headline class="h-resp" style="color: #fff;" level="h3"]WE HAVE MANY OPTIONS AND BENEFITS FOR LEAGUE BOWLERS.[/custom_headline]
<p class="p-resp">Your friends want to bowl here.</p>

[column type="two-thirds" fade="true" fade_animation="in-from-left" fade_animation_offset="2000px" last="true"]

[content_band class="center-text" inner_container="true" padding_top="5px" padding_bottom="5px" no_margin="true" border="none" bg_color="none"] 
[column type="one-half" fade="true" fade_animation="in-from-right" fade_animation_offset="3000px"] [image class="man" src="http://placehold.it/400x200" alt="Marketing"] [custom_headline class="mtm" level="h3" looks_like="h6"]Play Card.[/custom_headline][/column]

[visibility type="visible-phone"] [gap size="40px"] [/visibility] 
[column type="one-half" fade="true" last="true" fade_animation="in-from-right" fade_animation_offset="2000px"] [image class="man" src="http://placehold.it/400x200" alt="Marketing"] [custom_headline class="mtm" level="h3" looks_like="h6"]Birthday Card.[/custom_headline][/column]


[/content_band] 

[/column]
[/content_band]

[responsive_text selector=".h-resp" compression="1.0" min_size="12px" max_size="21px"]
[responsive_text selector=".t-resp" compression="1.0" min_size="18px" max_size="32px"]
[responsive_text selector=".p-resp" compression="2.25" min_size="16px" max_size="21px"]
[responsive_text selector=".btn-resp" compression="1.0" min_size="28px" max_size="36px"]

Website: http://dev2webfrogs.wpengine.com
WP Vers: 3.8.1
X Theme Vers: 1.7.3
X Shortcode Vers: 2.0.7

This is the ultimate goal (built in Photoshop):

[Jared NParticipant]

As you can see, I’m running into issues with shortcodes. There’s an extraneous band with the closing shortcodes

[/column] [/content_band]

Any insight on this situation is greatly appreciated!

-Jared

[KoryKeymaster]

Hey Jared,

WordPress does not allow nesting of similarly named shortcodes within one another, so if you’re trying to do something like this, it is not possible (simplified for demonstration):

[column]
  ...column content...
  [column]
    ...inner column content...
  [/column]
[/column]

Instead, you will need to manually markup your columns using the HTML ouptut by the shortcode itself. Something like this should work for you:

[column type="one-half"]
  <div class="x-column one-half">
    ...inner column content...
  </div>
  <div class="x-column one-half last">
    ...inner column content...
  </div>
[/column]
[column type="one-half" last="true"]
  ...column content...
[/column]

Thanks!

[Jared NParticipant]

Please see link below. I was able to achieve my goal. Thanks for your help X-folks!

http://dev2webfrogs.wpengine.com/bowling/leagues/

-Jared

[RubinKeymaster]

Hey Jared,

Looks great! If you need anything else let us know!

[Jesse CParticipant]

Hi, just out of curiosity, is it possible to add more than 2 rows of columns within the [column type=”one-half”][/column]?

[Kosher KMember]

Hi Jesse,

Did you mean something like this

[column type="one-half"]
  <div class="x-column one-half">
    ...inner column content...
  </div>
  <div class="x-column one-half last">
    ...inner column content...
  </div>
  <div style="clear:both;"></div>
  <div class="x-column one-half">
    ...inner column content...
  </div>
  <div class="x-column one-half last">
    ...inner column content...
  </div>
[/column]

Hope that helps.

Cheers

[Author]

Posts