Page Content 50/50 column split

[k_gaines]

I'm a Shopify beginner. I'm used to working in WordPress, so I know some HTML and CSS but not as familiar with the type of coding Shopify uses. I'm creating a template for one specific page. I have a Hulk App short code, for a contest entry form, in the page content area above and a rich text section, with the terms and conditions written in them, below. I'd like to have the entry form and the terms and conditions listed side by side. I can get the rich text section to be half width. Is there a way to have the page content displayed as half width?

OR 

If that's not possible, I can have the entry form and the rules and regulation in the page content area. Then arrange those items into two columns. I just don't know how to do that in Shopify. Any advise and help is welcome. 

[Dotsquares]

hi @k_gaines 

Totally understand where you’re coming from—coming from WordPress to Shopify can feel like switching languages at first, but you’re already on the right track.

Option 1: Make Page Content & Rich Text Side by Side
If you're using a custom page template, you can make the main page content (where your Hulk App shortcode is) display in half-width and place it next to the rich text section. This would involve editing the template's .liquid file (usually found under /sections/ or /templates/ depending on your theme).

Here’s a very basic idea:

<div class="page-custom-layout" style="display: flex; gap: 20px;">
  <div style="flex: 1;">
    {{ page.content }}
  </div>
  <div style="flex: 1;">
    {% section 'rich-text' %}
  </div>
</div>

This will place the main content (with the Hulk App form) on the left and the rich text section on the right. You can refine this further with CSS.

Option 2: Everything in the Page Content Area with Columns
If you'd rather keep everything in the page editor, you can use a bit of HTML to split the content into columns. Shopify supports HTML in the page content area.

Here’s a simple HTML layout you can paste directly into the page content editor:

<div style="display: flex; flex-wrap: wrap; gap: 20px;">
  <div style="flex: 1; min-width: 300px;">
    <!-- Hulk App shortcode -->
    [your-hulk-app-shortcode-here]
  </div>
  <div style="flex: 1; min-width: 300px;">
    <h3>Terms & Conditions</h3>
    <p>Your rules and regulations go here...</p>
  </div>
</div>

That way, both the form and the text sit nicely side by side on larger screens and stack on smaller ones.