CODEWITHSUNDEEP
htmlcssflexbox
erin
erin

Reputation: 23

Why flexbox code is not applying and text does not wrap?

I'm using flexbox to style my content. It worked on my first three divs, but on my third one, it is not working. I tried to apply things like flex-wrap to get my img and text to be side by side but they do not change and just stay stacked.

I've tried various flex tags, but it doesn't change. I want to use flexbox only.

#content {
  background: #ccc;
  padding: 30px 30px 30px 0;
  display: flex;
  flex-wrap: wrap;
}

#content article img {
  margin-right: 30px;
}

#content h1, #middle h1 {
  font-family: FuturaStdBoldCondensed;
  font-size: 30px;
  margin-bottom: .5em;
  color: #5c5c5c;
}

#content p,
#middle p {
  margin-bottom: 1em;
  line-height: 1.5em;
}
<section id="content">
  <article>
    <img src="images/frontPagePhoto.jpg" alt="photo">

    <h1>PROJECT: Cellular Network</h1>

    <p>In Kenya we are creating a cellular network, which poses several challenges, but will also come with many rewards. We are hoping that by the end of the year, all areas of this country will have coverage. We are working with local authorities to put
      service in reach of every villiage and community.</p>

    <p>Read more about it, or get involved...</p>
  </article>
</section>

The text continues to show below the image.

Upvotes: 1

Views: 1186

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Move the image out of the article element. Put it in a figure element instead, giving it semantic value and making it a flex item in the primary container.

#content {
  display: flex;
}
<section id="content">
  <figure>
    <img src="http://i.imgur.com/60PVLis.png" width="150" height="150" alt="">
  </figure>
  <article>
    <h1>PROJECT: Cellular Network</h1>
    <p>In Kenya we are creating a cellular network, which poses several challenges, but will also come with many rewards. We are hoping that by the end of the year, all areas of this country will have coverage. We are working with local authorities to put
      service in reach of every villiage and community.</p>
    <p>Read more about it, or get involved...</p>
  </article>
</section>

Upvotes: 1

Srishti
Srishti

Reputation: 64

You're applying flex to section tag which is not the immediate parent of the h1, p and img tags hence the flex property is not affecting any tags except the article tag. So, you must apply flex to article tag, which in this case is the immediate parent and it must work. Hope this helps. Thanks.

Upvotes: 0

vatz88
vatz88

Reputation: 2452

You're not getting your text <h1> and <img> in same line because default display style property of h1 tag is block.

As per your existing code, making parent element flex container does not affect it. While there are many ways to fix this, simplest will be adding display: inline-block; to your h1.

You can read more about block and inline style properties here CSS display: inline vs inline-block

#content {
    //background:#ccc;
    padding: 30px 30px 30px 0;
    display: flex;
    flex-wrap: wrap;
}

#content article img {
    margin-right:30px;
}

#content h1, #middle h1 {
    display: inline-block; // <-- THIS
    font-family:FuturaStdBoldCondensed;
    font-size:30px;
    margin-bottom:.5em;
    color:#5c5c5c;
}

#content p, #middle p {
    margin-bottom:1em;
    line-height:1.5em;
}
<section id="content">
    <article>
        <img src="https://via.placeholder.com/100" alt="photo">
        <h1>PROJECT: Cellular Network</h1>
        <p>In Kenya we are creating a cellular network, which poses several challenges, but will also come with many rewards. We are hoping that by the end of the year, all areas of this country will have coverage. We are working with local authorities to put service in reach of every villiage and community.</p>

        <p>Read more about it, or get involved...</p>
    </article>
</section>

Alternatively, if you wish to achieve this using flexbox, you can give flex: 1 to img and h1 and wrap them in a flex container. Also, better give img flex-grow: 0 too.

Upvotes: 0

Related Questions