Kevin Powell - Community•2mo ago

flex-group issue or heading text is too long

I am facing issue that my heading text is too long. it is taking too much space to the right I want to place them in two columns in design. I am using starter template from Kevin's course Beyond Css in module 3 after the chefs project. Here is the html

html 
<main>
      <section class="hero | bg-neutral-300">
        <div class="container | flex-group">
          <header class="section-header">
            <h1 class="ff-accent fs-800 fw-700 clr-neutral-900">
              Build The Community Your Fans Will Love
            </h1>

            <p class="clr-neutral-900 padding-block-24">
              Huddle re-imagines the way we build communities. You have a voice,
              but so does your audience. Create connections with your users as
              you engage in genuine discussion.
            </p>

            <button class="button" data-type="primary">
              Get Started For Free
            </button>
          </header>

          <img src="/images/illustration-mockups.svg" alt="" />
        </div>
      </section>
    </main>

    <footer></footer>

html 
<main>
      <section class="hero | bg-neutral-300">
        <div class="container | flex-group">
          <header class="section-header">
            <h1 class="ff-accent fs-800 fw-700 clr-neutral-900">
              Build The Community Your Fans Will Love
            </h1>

            <p class="clr-neutral-900 padding-block-24">
              Huddle re-imagines the way we build communities. You have a voice,
              but so does your audience. Create connections with your users as
              you engage in genuine discussion.
            </p>

            <button class="button" data-type="primary">
              Get Started For Free
            </button>
          </header>

          <img src="/images/illustration-mockups.svg" alt="" />
        </div>
      </section>
    </main>

    <footer></footer>

and CSS/Sass

@use "../abstracts" as *;

.flex-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--flex-column-gap, $flex-group-gap);
  row-gap: calc(var(--flex-row-gap, 0px) + ($flex-group-gap / 2));
  // row-gap: calc(var(--flex-row-gap, 0px) + #{$flex-group-gap / 2});
  // width: fit-content;

  &[data-type="navigation"] {
    align-items: center;
    justify-content: space-between;
  }
}
.flex-group.mx-auto {
  justify-content: center;
}

@use "../abstracts" as *;

.flex-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--flex-column-gap, $flex-group-gap);
  row-gap: calc(var(--flex-row-gap, 0px) + ($flex-group-gap / 2));
  // row-gap: calc(var(--flex-row-gap, 0px) + #{$flex-group-gap / 2});
  // width: fit-content;

  &[data-type="navigation"] {
    align-items: center;
    justify-content: space-between;
  }
}
.flex-group.mx-auto {
  justify-content: center;
}

4 Replies

شیخ مصدقOP•2mo ago

@Kevin Can you help me here?

Jochem•2mo ago

@شیخ مصدق please don't @ people to draw them into your questions, as per #📝rules 5

شیخ مصدقOP•2mo ago

Sorry for that 🙂 Should I delete that message?

b1mind•2mo ago

No but if you are a paying course member you should have instructions on how to unlock the course channel which it is ok to ask Kevin or for help as well as other classmates that are familiar with the code.

Gaming

Programming

flex-group issue or heading text is too long