How to add a text portion under a title image?-CodePudding

I want to add a text portion under the title section where I can write but when I try to amend the function it keeps adding the text to the title section which I do not want it to do. Is there a solution?

As previously mentioned, I tried to add text below the title section (so I can write things on the webpage). However, when I try to introduce new text, it adds text within the image title, not the

Website Page:

import React from 'react';
import '../../App.css';



function AboutMe() {
  return (
   <div className='aboutme'>
    <h1>About Me</h1>
      <div className='aboutmetext'>
        Text
      </div>
  </div>

    
  
  
  );
}

export default AboutMe;

CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
}

.home,
.articles,
.aboutme,
.sign-up {
  display: flex;
  height: 90vh;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.articles {
  background-image: url('/images/IMG_nappy_936094.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}
.aboutmetext{
  color: black;
  font-family: 'Courier New', Courier, monospace;
  justify-content: bottom;
  background-color: white;
  background-position: bottom;
  padding: 4rem;
  
  
}


.aboutme {
  background-image: url('/images/img-7.jpg');
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 100px;
}

.sign-up {
  background-image: url('/images/img-home.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

CodePudding user response：

If you want things to go from top to bottom with Flexbox, just state it in your container using flex-direction: column.

.home,
.articles,
.aboutme,
.sign-up {
  display: flex;
  flex-direction: column;
  height: 90vh;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

That way, your text is going under the title. But, please note the following points for your question next time

Here, we don't have any access to your images, as they are local, so we have only a bare idea of what layout looks like.
You should use CodeSandbox when you want visual-based, layout issues to be solved, as it allows us to see a real, live version of what you currently have, and to show you our modifications.

CodePudding user response：

This should solve your problem :

First, you need to add another class for your title:
.aboutmeTitle { color: black; font-size: 4rem; /*You can add your style for your title here*/ } and in your "AboutMe()" function add a className into your title like this :
<h1 className="aboutmeTitle">About Me</h1>
And second, change your aboutme class into this : .aboutme { background-image: url("/images/img-7.jpg"); background-position: center; background-size: cover; color: #fff; font-family: "PT Sans", sans-serif; height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

And that's it! I hope it works.

and this is for the Demo