🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] 3 column layout within section content. Content is not stretching the height

Home Forums Support 3 column layout within section content. Content is not stretching the height

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1140006
    Philipp

    I try to realise a 3 column layout within a section.
    Two Problems:

    1. The section’s height does not stretch with the content.
    2. The layout is not responsive. If I check it on mobile the columns should stack on top of each other.

    I’m a beginner in html/css. here is what I added in the section content area and the custom css:

    Section Content:

    <div>
    <div class="row">
      <div class="column">
        <h2><img src="https://www.sleep-music.co/wp-content/uploads/2019/08/Baby-Sleep-3-Main-Cover-2019_500x500-300x300.jpg" alt="" width="300" height="300" />
    <h1>Our Baby Sleep Series</h1>
        <p>Especially designed lullabies for Babys and Toddlers. We add-mixed heart beat and blood circulation sounds to make the baby feel safe and "at home". They are familiar to this ambience from the mother's womb. We also work with our 3-Phase</p>
      </div>
      <div class="column">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
    </div>
    </div>
    
    Custom CSS (via the simple CSS plugin)
    .column {
      float: left;
      width: 30%;
      padding: 10px;
      margin:10px;
      height: 300px; /* Should be removed. Only for demonstration */
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    #1140397
    David
    Staff
    Customer Support

    Hi there,

    try this instead:

    1. Edit the Section on the Settings > Custom Classes give it a CSS Class of: section-three-column

    2. Then simply add the 3 column items to the content. e.g

    <div class="section-column">
        <!-- Your HTML Here -->
    </div>
    <div class="section-column">
        <!-- Your HTML Here -->
    </div>
    <div class="section-column">
        <!-- Your HTML Here -->
    </div>

    3. Then add this CSS:

    /* Remove clearfix from Sections */
    .section-three-column .generate-sections-inside-container:before {
        display: none;
    }
    
    /* Create grid for Desktop */
    @media (min-width: 769px) {
        .section-three-column .generate-sections-inside-container {
            display: grid;
            grid-template-columns: 33% 33% 33%;
        }
    }
    
    /* Style Grid columns */
    .section-column {
        padding: 10px;
        margin:10px;
    } 
    #1140413
    Philipp

    Thanks David for the help. Do you mean add “section-column” and not “section-three-column”, right?

    #1140414
    Philipp

    Oh no, you were right, I just tested it and it worked.Great thanks so much!

    #1140420
    David
    Staff
    Customer Support

    The section-three-column class gets added to the HTML that GP Creates for the section. That class is then used to add the grid to sections inside container – so no need to ‘wrap’ your HTML 🙂

    Glad to be of help.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.