Can't figure out how to keep my flex elements from moving across the page-CodePudding

I am fairly new to coding and I am working on a project. My issue is that I am creating my about me section and I can't figure out how to make it responsive with flexbox for mobile and desktop without the elements moving around the page. I've googled my heart out and I'm just stuck.

'''

    <div >

        <img src="/img/sebandme.jpg" alt="Profile Photo" >

        <h2 >About Me</h2>

        <p >Some Text</p>

    </div>

</section>

'''
.aboutme-container {
background: #29326a;
display: flex;
justify-content: center;
align-items: center;
padding: 48px 0;

}

.aboutme-content {
color: #F1F1F1;
width: 100%;
max-width: 1000px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px;

}

.about-title {
height: 330px;
position: absolute;
display: inline-flex;
padding-left: 50%;
top: 95%;
color:#74b44a ;
text-shadow: 2px 2px #535151;

}

.about-section {
display: flex;
flex-shrink: inherit;
text-align: justify;
padding-left: 38%;

}

.aboutme-photo {
display: flex;
position: absolute;
max-width: 200px;
top: 600px;
right: 300px;
object-fit: contain;
flex-shrink: inherit;

} '''

CodePudding user response：

Take a look at A Complete Guide to Flex-Box. It will provide an over-view of the style rules you should employ.

Typically, you'll set your container element like this:

   display: flex; // displays as flex
   flex-flow: row nowrap; // set how child elements will behave
   justify-content: start; // set how child elements will be justified

Then in each item, you might have something like this:

   flex: 0 1; // set the min and max width the element will expand due to flex
   align-self: center; // how the item aligns itself on the y-axis
   // whatever else you want

Having display: flex on each element makes that element behave like a container element rather than an item element.

CodePudding user response：

I am guessing you wan to do something like this?

  <div >
   <img src="client-2.png" alt="Profile Photo" >

    <div >
      <h2 >About Me</h2>
      <p >Lorem ipsum dolor sit amet consectetur 
         adipisicing elit. Voluptatibus architecto cupiditate est 
         numquam soluta obcaecati doloribus placeat aliquam sunt? 
         Quaerat?</p>
    </div>
</div>

and this is for CSS:

  .aboutme-content{
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 25px;
    }
   .description{
      width: 50%;
    }

I deleted your css code, but add anything you want to adjust to your preference in regeards to height and width

you can learn some flex box here: https://www.youtube.com/watch?v=3YW65K6LcIA