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 kibsaim hernandez
kibsaim hernandez
3,159 Points

Help With Text Split...

ok so I have this code using flex-box lay out. The problem I have is that paragraphs split in to 2 columns when window is stretched . I would like to know how to avoid that..

<div class="main-container">
        <div class="about-us-text">
            <h1 class="service-title"> About Us</h1>
            <p>Ninth Dimension Cleaning is a dynamic leader in the quality residential and commercial cleaning services business. We pride ourselves on building mutually beneficial relationships with customers, employees, vendors, fulfilling our promise of providing top quality janitorial and maintenance services through men and women committed to honesty, integrity, and hard work.
</p>
            <p>Our dedicated personal service is second to none and has earned us the reputation of a first class cleaning company. Our core competence is the ability to recruit the best locally sourced staff. Our team of professionals are experienced and the best in their field.</p>
            <p>We are a Mission-driven company that aims to set the standards of excellence for cleaning and maintenance services. We are building a business in which high standards permeate all aspects of our company. Quality of service is our state of mind.
</p>
            <p>We guarantee our customers 100% satisfaction or their money will be refunded. Customers are the lifeblood of our business. Therefore, we go to extraordinary lengths to satisfy you. We want to meet or exceed your expectations on every aspect of the cleaning and maintenance services we provide.
 </p>
        </div>

Css only display flex box

John Coolidge
John Coolidge
12,614 Points

I'm not able to replicate your problem. I did notice that you only have one div closing tag at the bottom of your HTML.

Also, what CSS do you have? Your post says display flex box but that doesn't tell me what div is a flex container? Is it the class "main-container"? The body?

2 Answers

John Coolidge
John Coolidge
12,614 Points
John Coolidge
John Coolidge
12,614 Points

Also, I will try to answer your question here, as I have a guess as to what your problem might be.

If you make something a flex container, all of the items in that container are going to display as a row of columns. In order to keep each paragraph on it's own line you need to write the following CSS in your flex container:

flex-container {
  flex-direction: column;
}

This overrides the default, which is flex-direction: row.

If I've totally missed the mark, my apologies. Add some comments so that I can better assist you in fixing the problem.

Thanks, John

kibsaim hernandez
kibsaim hernandez
3,159 Points
kibsaim hernandez
kibsaim hernandez
3,159 Points

Thank you far taking the time to look, I found the problem , I had put a column split on my media query that was the problem , I had forgot all about it.