What could be causing the flexbox code to not take effect and the text to refuse wrapping?

Question

What could be causing the flexbox code to not take effect and the text to refuse wrapping?

I've been utilizing flexbox to style my content, and it worked seamlessly on the first three divs. However, when I attempted to apply the same styling to the fourth one, it didn't quite work out as planned. Despite trying options like flex-wrap to align my image and text side by side, they stubbornly remained stacked.

Despite experimenting with different flex properties, I couldn't seem to get the desired outcome. My goal is to stick to using flexbox for this layout.

#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 accompanying text can be found below the image.

html css flexbox

Answer 1

Answer №1

Remove the image from the article element and place it within a figure element to enhance its semantic value. Additionally, style it as a flex item within the main 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>

Answer 2

Remove the image from the article element and place it within a figure element to enhance its semantic value. Additionally, style it as a flex item within the main 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>

Answer 3

Answer №2

The reason your text in <h1> and <img> elements is not on the same line is because the default display style property of the h1 tag is set to block.

In your current code, changing the parent element to a flex container does not solve the issue. One simple way to fix this is by adding display: inline-block; to your h1 element.

If you want to learn more about the differences between block and inline style properties, you can visit this link: 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 prefer using flexbox to achieve this layout, you can assign flex: 1 to both the img and h1 elements and place them within a flex container. Additionally, setting flex-grow: 0 for the img element would be beneficial.

Answer 4

The reason your text in <h1> and <img> elements is not on the same line is because the default display style property of the h1 tag is set to block.

In your current code, changing the parent element to a flex container does not solve the issue. One simple way to fix this is by adding display: inline-block; to your h1 element.

If you want to learn more about the differences between block and inline style properties, you can visit this link: 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 prefer using flexbox to achieve this layout, you can assign flex: 1 to both the img and h1 elements and place them within a flex container. Additionally, setting flex-grow: 0 for the img element would be beneficial.

Answer 5

Answer №3

By assigning the flex property to a section tag that is not directly above the h1, p, and img elements, you are preventing the flex property from affecting those specific tags. Instead, try applying the flex property to the article tag, as it is the immediate parent in this scenario and should have the desired effect. I hope this explanation clarifies things for you. Thank you.

Answer 6

By assigning the flex property to a section tag that is not directly above the h1, p, and img elements, you are preventing the flex property from affecting those specific tags. Instead, try applying the flex property to the article tag, as it is the immediate parent in this scenario and should have the desired effect. I hope this explanation clarifies things for you. Thank you.

What could be causing the flexbox code to not take effect and the text to refuse wrapping?

Answer №1

Answer №2

Answer №3

Similar questions

picture protrudes from the frame [WordPress template]

What is the best way to create this using html and css?

The background of an HTML button does not appear in IE8

Focusing on a particular iframe

Steps to include a HTML webpage within another page

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Resolving Div Alignment Issues in Internet Explorer with jQuery CSS AddClass and RemoveClass

When trying to load AJAX, it does not function properly unless the page is refreshed

Can you transform a component with inputs into plain HTML code?

Tips for centering a video vertically within a cell

JavaScript animation is not functioning as expected

Steps for embedding a webpage within a div element

Ways to turn off textarea resizing

Do individual JavaScript script tags operate independently of one another in terms of error handling?

CSS-Enabled Panels held in place with Draggable Feature

What is the best way to arrange 4 divs with 2 on each line?

Tips for concealing scrollbar track without the use of overflow

Is the PHP configuration correct for Apache on your local server?

Incorporate zoom feature into the jQuery polaroid gallery

Image not found in PDF created from HTML to PDF conversion