Next.js Discord

Discord Forum

the thing is at the same line as

Unanswered
Pyrrhuloxia posted this in #help-forum
Open in Discord
PyrrhuloxiaOP
so like reactjs i did this

import Header from "./components/navbar";
import Land from "./components/home";
import About from "./components/about";

export default function Home() {
  return (
    <div>
      <Header />
      <Land /> 
      <About /> 
    </div>
  );
}

but the About page is at the same line of the Landing page

66 Replies

Netherland Dwarf
What do you mean?
@Netherland Dwarf What do you mean?
PyrrhuloxiaOP
look at the ss
about should be below the landing page
but its with the landing page
Netherland Dwarf
Right, how are you styling the home page text
PyrrhuloxiaOP
tailwind
Netherland Dwarf
Okay, what styles did you apply
It is absolute?
PyrrhuloxiaOP
Netherland Dwarf
Sorry, i cant download but you can just say
If you add position absolute
Or relative
To the title or heading
Because this seems more like a style issue
PyrrhuloxiaOP
yeah i did add absolute
@Netherland Dwarf Because this seems more like a style issue
PyrrhuloxiaOP
yeah
Netherland Dwarf
Yeah thts why
Hmm why are you adding absolute to the main title?
Is it for some animation or something else
You can just use text center
If your trying to center
PyrrhuloxiaOP
<div className="ani-in -mt-10 mb-8 flex flex-col items-center gap-6 text-center fill-mode-backwards sm:-mt-20 svelte-tfta6k">
        <svg width="86" height="89" viewBox="0 0 86 89" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0.506321 88.5134C0.506321 88.2429 3.51124 83.7441 7.18392 78.516L13.8615 69.0104H37.505H61.1485L62.5494 66.7354C65.9136 61.272 65.8402 61.9587 63.4995 57.8395L61.4175 54.1755H37.6239H13.8303L6.91516 40.9308L0 27.686L1.71425 24.3222C2.65709 22.4721 4.65391 18.6163 6.15163 15.7538C7.64934 12.8913 10.0961 8.17657 11.5888 5.27662L14.3029 0.00398162L50.1515 1.60509e-05C69.8682 -0.0021608 86 0.217364 86 0.487859C86 0.758355 82.9951 5.25719 79.3224 10.4853L72.6448 19.9909L48.902 19.9933L25.1593 19.9957L22.9766 23.8465C20.5861 28.0641 20.5782 27.8071 23.2393 32.4013L25.0107 35.4594L48.7909 35.6263L72.5711 35.7933L79.2715 48.3706C82.9567 55.2882 85.9782 61.3135 85.986 61.7602C85.9937 62.2069 82.8958 68.5174 79.1017 75.7835L72.2034 88.9945L36.3549 89C16.6382 89.0028 0.506321 88.7839 0.506321 88.5134Z"
            fill="url(#paint0_linear_1215_9)"
          />
          <defs>
            <linearGradient id="paint0_linear_1215_9" x1="43" y1="0" x2="43" y2="89" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FF0000" />
              <stop offset="1" stop-color="#FF003D" />
            </linearGradient>
          </defs>
        </svg>
      </div>

      <div>
        <h1 className="title-font sm:text-5xl text-5xl mb-4 font-bold text-white">Embark Your Journey</h1>
        <h3
          className="font-bold tracking-tight sm:text-5xl title-font text-3xl mb-4"
          style={{
            background: 'linear-gradient(90deg, #ff005d, #ff002f)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          with System
        </h3>
      </div>
    </div>
mhm>
Netherland Dwarf
Im not sure what you trying to do like in terms of animation
But unless you need absolute
@Netherland Dwarf Im not sure what you trying to do like in terms of animation
PyrrhuloxiaOP
the animation is just for the background
Netherland Dwarf
What i recommend instead
Is to do the following
:
<parent>
<absolute></absolute>
<h1></h1>
</parent>
…
For this html structure
The Parent html is relative
But make the absolute element absolute that takes full height and width of parent
Because absolute only takes max dimension of its parent that is relative
PyrrhuloxiaOP
o
Netherland Dwarf
So if you make parent lets say
100vh and 100%width
Then in the absolute html element, make it take full height and width
PyrrhuloxiaOP
my question is how do i make the about section which is at the same line as the home page get down
Netherland Dwarf
This will prevent the “about us” from overflowing
What i said
Will fix it
The whole idea
Is to make the home’s parent element relative
Which will push down about us
This is the cleanest way to fix it
The other hacky way is adding padding or margins
PyrrhuloxiaOP
so in here 
import Header from "./components/navbar";
import Land from "./components/home";
import About from "./components/about";

export default function Home() {
  return (
    <div>
      <Header />
      <Land /> 
      <About /> 
    </div>
  );
}


i add the absolute tag to the land?
Netherland Dwarf
I just gave a rough structure
In the code snippet i put
But inside your land component
You want your html structure to be like
<div> \parent
<div></div> \ this for the absolute background
<h1><\h1>

…
</div>
Somethibg like that
And make parent take 100vh or any height that you want
And make the absolute div take the full height and width if its parent
PyrrhuloxiaOP
so i added div before section and this happened
it shifted to left hmm
Netherland Dwarf
You have to add the properties i mentioned
PyrrhuloxiaOP
css?
Netherland Dwarf
Yes
And it needs to be the same html structure
As i said
For it to work
PyrrhuloxiaOP
ohk
Netherland Dwarf
I have to go to sleep but il will check tomorrow morning.
Maybe someone else can help meanwhile if not solved.