Can you point out the syntax error in my flex code?

Question

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my .even-columns class based on the current width set in .container, but I'm unsure of how to rewrite this using flex.

Do I need to include the correct width property or should I have applied flex to my container instead?

/* CONTAINER CLASS */

.container {
  --max-width: 1110px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}


/* EVEN COLUMNS CLASS */

.even-columns {
  display: grid;
  gap: 1rem;
  /* Trying same layout with flexbox
  display: flex;
  gap: 1rem;*/
}

@media (min-width: 50em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /*Trying same layout with flexbox
    display: flex;
    flex-direction: column;*/
  }
}

<!-- Main -->
<main>
  <section>
    <div class="container">
      <div class="even-columns">
        <div>
          <h1 class="fs-primary-heading fw-bold">Bring everyone together to build better products.</h1>
          <p>Manage makes it simple for software developers to chorolate their projects and share them with other teams and colleagues. </p>
          <button class="button">Get Started</button>
        </div>
        <div>
          <img src="images/illustration-intro.svg" alt="">
        </div>
      </div>
    </div>
  </section>


  <section>
    <div class="container">
      <div class="even-columns">
        <div>
          <h2 class="fs-secondary-heading fw-bold">Manage your team</h2>
        </div>
        <div>
          <ul class="numbered-items" role="list">
            <li>
              <h3 class="fs-600 fw-bold">Advertising</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 class="fs-600 fw-bold">Version Control</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 class="fs-600 fw-bold">Database Management</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

html css flexbox css-grid

Answer 1

Answer №1

When it comes to grid rules and flexbox rules, they display content in opposite ways.

The grid functions correctly with min-width by dividing the content into two columns of the same row when the width is 50em or more.

However, the same media query used with your flexbox code instructs it to display content in a column when the width exceeds 50em, which is completely contrary.

To put it simply, looking at it from a "mobile-first" perspective, your grid rules will render content in a column, while your flex rules will show content in a row.

You have two possible solutions:

Option one is to leave the code unchanged and adjust min-width to

max-width</code; this change will make flexbox work correctly.</p>
<p>Secondly, if you desire a "mobile first" design, there's no need to modify the application rule of the media query.</p>
<p>Just include <code>flex-direction: row;

within the .even-columns that is inside the media query, and add flex-direction: column; to the .even-columns located outside the media query.

Furthermore, if you want the columns to have equal widths, you must define the width for the children of .even-columns.

This is where grids excel because they eliminate the need to define all these styles for the container's children.

/* CONTAINER CLASS */

.container {
  --max-width: 1110px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}


/* EVEN COLUMNS CLASS */

.even-columns {
  display: flex;
  gap: 1rem;
}

@media (max-width: 50em) {
  .even-columns {
    display: flex;
    flex-direction: column;
  }

}

.even-columns > div {
  min-width: 50%;
}

<!-- Main -->
<main>
  <section>
    <div class="container">
      <div class="even-columns">
        <div>
          <h1 class="fs-primary-heading fw-bold">Bring everyone together to build better products.</h1>
          <p>Manage makes it simple for software developers to chorolate their projects and share them with other teams and colleagues. </p>
          <button class="button">Get Started</button>
        </div>
        <div>
          <img src="images/illustration-intro.svg" alt="">
        </div>
      </div>
    </div>
  </section>


  <section>
    <div class="container">
      <div class="even-columns">
        <div>
          <h2 class="fs-secondary-heading fw-bold">Manage your team</h2>
        </div>
        <div>
          <ul class="numbered-items" role="list">
            <li>
              <h3 class="fs-600 fw-bold">Advertising</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 class="fs-600 fw-bold">Version Control</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 class="fs-600 fw-bold">Database Management</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

Answer 2

When it comes to grid rules and flexbox rules, they display content in opposite ways.

The grid functions correctly with min-width by dividing the content into two columns of the same row when the width is 50em or more.

However, the same media query used with your flexbox code instructs it to display content in a column when the width exceeds 50em, which is completely contrary.

To put it simply, looking at it from a "mobile-first" perspective, your grid rules will render content in a column, while your flex rules will show content in a row.

You have two possible solutions:

Option one is to leave the code unchanged and adjust min-width to

max-width</code; this change will make flexbox work correctly.</p>
<p>Secondly, if you desire a "mobile first" design, there's no need to modify the application rule of the media query.</p>
<p>Just include <code>flex-direction: row;

within the .even-columns that is inside the media query, and add flex-direction: column; to the .even-columns located outside the media query.

Furthermore, if you want the columns to have equal widths, you must define the width for the children of .even-columns.

This is where grids excel because they eliminate the need to define all these styles for the container's children.

/* CONTAINER CLASS */

.container {
  --max-width: 1110px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}


/* EVEN COLUMNS CLASS */

.even-columns {
  display: flex;
  gap: 1rem;
}

@media (max-width: 50em) {
  .even-columns {
    display: flex;
    flex-direction: column;
  }

}

.even-columns > div {
  min-width: 50%;
}

<!-- Main -->
<main>
  <section>
    <div class="container">
      <div class="even-columns">
        <div>
          <h1 class="fs-primary-heading fw-bold">Bring everyone together to build better products.</h1>
          <p>Manage makes it simple for software developers to chorolate their projects and share them with other teams and colleagues. </p>
          <button class="button">Get Started</button>
        </div>
        <div>
          <img src="images/illustration-intro.svg" alt="">
        </div>
      </div>
    </div>
  </section>


  <section>
    <div class="container">
      <div class="even-columns">
        <div>
          <h2 class="fs-secondary-heading fw-bold">Manage your team</h2>
        </div>
        <div>
          <ul class="numbered-items" role="list">
            <li>
              <h3 class="fs-600 fw-bold">Advertising</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 class="fs-600 fw-bold">Version Control</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 class="fs-600 fw-bold">Database Management</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

Can you point out the syntax error in my flex code?

Answer №1

Similar questions

Conceal all div elements except for displaying the initial two

Steps for inserting a clickable phone number link within innerHTML1. First, create an

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

How to locate a specific object by its ID within a JSON structure embedded in an HTML template

Creating a grid layout with a row of buttons

Enhancing the appearance of a JSX component in React

validation of dialog forms

Angular version 6 allows for specifying input types as numbers and displaying two decimal digits after the comma

What is the method for viewing the content within div tags on an apex page?

Prettyprint XML in Angular 8+ without using any external libraries

Creating an If statement to evaluate the state of a parameter

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

Generate a new Div dynamically, positioned higher than the rest

Populate an HTML select with data as users click the create button

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

Align title text to the right within the Material Design Card

Choose the checkbox if the tablerow includes specific text

What are the steps to switch multiple CSS styles for creating a dark mode?

Ways to turn off textarea resizing

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly