Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

[SOLVED] How to display items within a flex item

This seems like an easy question but I am having difficulty aligning items that are in a flex item. So for example I have a container div which is the flex container. Then inside that I have two divs (flex items). In mobile view they have a flex-direction: column and in tablet,pc view they have flex-direction:row which is how I want my layout.

My problem is the items within the second div (flex items). It seems to wrap the content around to the bottom of the first div (flex items). I just want the items within that div to stay displaying in block form.

Here is a link to a screen dump of what it looks like

And here is the html

<div id="flex-container">
    <div class="news-image">
        <img src="{{ whatPage.what_img  }}" alt="What We Do Image" />
    </div>
    <div class="verticalLine"></div>
    {% for i in info %}
    <div class="para">

            <h2>{{ i.heading }}</h2>
            <p>{{ i.para1 }}</p>
            <p>{{ i.para2 }}</p>

                {% if i.sub_heading is not null %}
                <h3>{{ i.sub_heading }}</h3>
                <p>{{ i.sub_para }}</p>
                {% endif %}

                {% if i.sub_heading2 is defined %}
                <h3>{{ i.sub_heading2 }}</h3>
                <p>{{ i.sub_para2 }}</p>
                {% endif %}



    </div>
   {% endfor %}

  <div class="horizontalLine"></div>

</div>

Here is the css

#flex-container{
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    -webkit-box-direction: column;

    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    -moz-box-direction: column;

    display: -ms-flexbox; /* TWEENER - IE 10 */
    -ms-flex-direction: column;

    display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, BB10 */
    -webkit-flex-direction: column;

    display:flex; /* NEW, Spec - Firefox, Chrome, Opera */
    flex-direction:column;
}

@media screen and (min-width: 480px){
  /************************
  TWO COLUMN LAYOUT
  ************************/
    #flex-container{

        -webkit-box-direction: row; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
        /* doesn't support wrap */
        -webkit-box-lines: multiple;

        -moz-box-direction: row; /* OLD - Firefox 19- (buggy but mostly works) */
        -moz-box-lines: multiple;

        -ms-flexbox-direction: row; /* TWEENER - IE 10 */
        -ms-flex-wrap: wrap

        -webkit-flex-direction: row; /* New Safari 6.1+, iOS 7.1+, BB10 */
        -webkit-flex-wrap: wrap;

        flex-direction: row; /* NEW, Spec - Firefox, Chrome, Opera */
        flex-wrap:wrap;

        margin-left:50px;
    }
    .news-image{
        width:40%;
        margin: 2.5%;
    }
    .para{
        width:50%;
        margin-right:2.5%;
        margin-top:-10px;

    }

}
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I don't think "here is the html" is quite right.

I'm pretty sure "{% for i in info %}" is not HTML, what is it?

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

its a .html.twig file

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Can you convert it to pure HTML and CSS to make it easier to demonstrate the problem?

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Sure here is the pure html. The css is already pure?

<div id="flex-container">
    <div class="news-image">
        <img src="img/what.jpg" alt="What We Do Image" />
    </div>
    <div class="verticalLine"></div>


        <div class="para">

            <h2>Building Design</h2>
            <p>We undertake professional instructions including contract administrator’s duties and responsibility for design.</p>
            <p>Our instilled passion for quality design of buildings set us apart from the ordinary.</p>

         </div>

                <div class="para">

            <h2>Quantity Surveying</h2>
            <p>We provide efficient and accurate surveying of all financial issues of contracts from inception stage through to and including final account..</p>
            <p>Our instilled focus for accurate surveying of quantities ensure construction costs are reasonable.</p>

         </div>

          <div class="para">

            <h2>Project Management Consultancy</h2>
            <p>We deliver construction projects in collaboration with our network of established contractors, and construction and property professionals.</p>
            <p>Our instilled attention to detail ensure we are on hand to make the correct design decisions.</p>

            <h3>Pre-contract:</h3>

            <p>Feasibility studies, design brief, appointment of Consultants, site surveys, building design, estimating, planning consent, tender scoring and selection, programming of works, financial management, project co-ordination, and contract administration.</p>

            <h3>Post-contract:</h3>

            <p>Management of the snagging process, monitoring of works progress and quality management, and handover of works.</p>
         </div>

          <div class="para">

            <h2>Fees</h2>
            <p>Our professional fees are dependent upon the size and scope of the individual project. For a specific quotation please call to discuss your requirements.</p>

       </div>




  <div class="horizontalLine"></div>

</div>
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

solved it! I simply included another div within the "para" class div like so within my original twig file;

<div id="flex-container">

    <div class="news-image">
        <img src="{{ whatPage.what_img  }}" alt="What We Do Image" />
    </div>
    <div class="verticalLine"></div>

    <div class="para">
        {% for i in info %}
            <div class="what-info">
                <h2>{{ i.heading }}</h2>
                <p>{{ i.para1 }}</p>
                <p>{{ i.para2 }}</p>

                    {% if i.sub_heading is not null %}       
                    <h3>{{ i.sub_heading }}</h3>
                    <p>{{ i.sub_para }}</p>
                    {% endif %}

                    {% if i.sub_heading2 is defined %}
                    <h3>{{ i.sub_heading2 }}</h3>
                    <p>{{ i.sub_para2 }}</p>
                    {% endif %}
            </div>
        {% endfor %}

    </div>

</div>

    <div class="horizontalLine"></div>

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Congrats on solving your own issue. :+1:

I should have asked for that conversion the first time! :wink: