Aligning an H1 and a <p> inside of a grid to be relative to each other no matter the screen size.

[Tanaz]

I'm using NextJS so the code might seem a bit weird for some but what I'm having issues with is a very basic web layout with a big H1 in the middle and my name right below it aligned with the right edge of the H1. The issue is that my grid needs to be 100vh and 100vw sized and not a fixed size because I'm making a "snap scroll" type of website that would scroll an entire section every time a button is pressed / the scroll wheel is used. So whenever the viewport gets resized the positioning of my H1 and <p> relative to eachother changes. I know it sounds hard to visualize so I have made a short video demonstrating the issue (I've also enabled firefox grid view for better visualization of the issue).

As you can see "by Atanas Atanasov" moves relative to the H1 whenever I resize the viewport and I need it to be aligned with h1's right edge.

Here's my section component's code (ignore the button and "scroll down for projects" paragraph, those are not relevant to the issue):

const Section1 = () => {
  return (
    <section id="section1">
      <div className={styles.gridContainer}>
        <div className={styles.h1Container}>
          <h1 className={ralewayH1.className}>Design.Develop.Deliver.</h1>
        </div>
        <div className={styles.byAtanas}>
          <p className={ralewayNormal.className}>by Atanas Atanasov</p>
        </div>
        <div className={styles.scrollForProjects}>
          <p className={ralewayNormal.className}>Scroll for projects</p>
        </div>
        <div className={styles.scrollbuttonContainer}>
          <Link className={styles.scrollLink} href="#section2">
            Click
          </Link>
        </div>
      </div>
    </section>
  );
};

export default Section1;

 

And here's my CSS configuration that quite frankly looks bonkers after all my attempts to fix the issue (latest idea was to split the entire viewport into a 20x20 grid and position the items precisely but that obviously didn't work):

.gridContainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: repeat(20, minmax(15px 15px));
  grid-template-rows: repeat(20, minmax(15px 15px));
}

.h1Container {
  margin: auto;
  grid-row: 8/16;

  grid-column: 8/12;
  font-size: 5em;
  overflow: hidden;
}

.byAtanas {
  grid-row: 14;
  grid-column: 10/12;
  justify-self: end; /* Align the paragraph to the end of its grid cell */
  font-size: 2em;
}

.scrollForProjects {
  grid-row: 18;
  grid-column: 1/20;
  margin: auto;
  font-size: 2em;
}

.scrollLink {
  scroll-behavior: smooth !important;
}

 

This is an incredibly basic issue yet my brain's been fried trying to fix it. Any help would be appreciated . Thanks.

[C2dan88]

Think the h1 and p need to share the same parent div container, then you can right align the p to keep text right of h1. Currently they are separate divs with their own independent widths.

To visualise better apply a border color to the h1 and p to see their actual widths.

[Tanaz]

3 minutes ago, C2dan88 said:

Think the h1 and p need to share the same parent div container, then you can right align the p to keep text right of h1. Currently they are separate divs with their own independent widths.

To visualise better apply a border color to the h1 and p to see their actual widths.

So they need to be treated as a single grid item? Do I just do something like <h1><br><p></p></h1> inside a single div that's treated as a grid item?

edit: Yep that's exactly what it is. Put both the h1 and the p inside a single div to be treated as a single grid item and didn't even need a <br>. It worked. I spent hours on this. I'm livid to say the least. Thanks a lot!

[C2dan88]

8 minutes ago, Tanaz said:

<h1><br><p></p></h1> inside a single div that's treated as a grid item?

Something like this

<div className={styles.h1Container}>
   <h1 className={ralewayH1.className}>Design.Develop.Deliver.</h1>
   <p className={styles.byAtanas ralewayNormal.className}>by Atanas Atanasov</p>
</div>

hen it should be right aligned of the h1. You may need to mess with right margins/padding to fine tune the alignment.

 

[Tanaz]

19 minutes ago, C2dan88 said:

Something like this

<div className={styles.h1Container}>
   <h1 className={ralewayH1.className}>Design.Develop.Deliver.</h1>
   <p className={styles.byAtanas ralewayNormal.className}>by Atanas Atanasov</p>
</div>

hen it should be right aligned of the h1. You may need to mess with right margins/padding to fine tune the alignment.

 

Now I'm having another issue. I'm trying to animate each word to fade-in one by one but the moment "by Atanas Atanasov" appears the h1 jumps up for a second. Any ideas what might be causing this?

Here's a video.

 

And here's the modified CSS code:

.gridContainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: repeat(20, minmax(15px 15px));
  grid-template-rows: repeat(20, minmax(15px 15px));
}

.h1Container {
  margin: auto;
  grid-row: 8/16;
  grid-column: 8/12;
  font-size: 55px;
  overflow: hidden;
  visibility: hidden;
}

.byAtanas {
  grid-row: 14;
  grid-column: 10/12;
  justify-self: end; /* Align the paragraph to the end of its grid cell */
  font-size: 20px;
  text-align: right;
  animation: fadeIn 2s;
  animation-delay: 6s;
  animation-fill-mode: forwards;
}

.scrollForProjects {
  grid-row: 18;
  grid-column: 1/20;
  margin: auto;
  font-size: 2em;
}

.scrollLink {
  scroll-behavior: smooth !important;
}

.scrollButtonContainer {
  grid-row: 20;
  grid-column: 1/20;
}

.h1span1 {
  animation: fadeIn 2s;
  animation-fill-mode: forwards;
}

.h1span2 {
  animation: fadeIn 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.h1span3 {
  animation: fadeIn 2s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    width: 0;
  }
  10% {
    opacity: 0.1;
    width: 100%;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

 

edit: I animated "width:0;" accidentally and forgot to delete it. Fixed.