Ways to adjust the positioning of an image

Question

Ways to adjust the positioning of an image

Seeking assistance, I am currently working on building a portfolio using HTML while following a tutorial. I utilized undraw to insert an image but unfortunately, the image is fixed to the right-hand side:

I would like to position the image below my icons, but I am unsure of the correct approach to achieve this. Any suggestions on how to center the SVG image beneath my icons?

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap');

*{
    color:black;
    font-family: 'Lato', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6,span{
    color:black;
    text-align: center;
    line-height: 1.25;
}

h1{
    font-size: 36px;
}

p{
    line-height: 1.5;
    font-size: 16px;
}

li{
    list-style-type: none;
}

.flex{
    display: flex; 
}

.flex-1{
    flex: 1; 

}
/* Navigation bar */

.row{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.text-pink{
    color: #FF69B4;
}


nav{
    height: 100px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.nav__link--list{
    display: flex;
}

.nav__link--anchor{
    margin: 0 12px;
    color: black;
    text-decoration: none;
    font-weight: 700;
}

.nav__link--anchor-primary{
    background-color: #FF69B4;
    padding: 8px 20px;
    border-radius: 50px;
    color: white;
    transition: all 300ms ease;
}

.nav__link--anchor-primary:hover{
    background-color: #FF69B4;
}

.personal_logo{
    font-size: 20px;
    color: #FF69B4;
    margin: 0 12px;
    font-weight: bold;
}

/* About mE */
#about-me{
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
}

.about-me__info{
    display: flex;
    flex-direction: column;
}



.about-me__info--container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.about-me--picture--mask{
    width: 180px;
    height: 180px;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,1);
    margin-bottom: 20px;

    
}

.about-me__picture{
    width: 100%;
    transform: scale(1,1.1);
    padding-top: 7px;
}

.about-me__info--para{
    font-size: 15px;
    margin-bottom: 28px;
}

.about-me__info--title{
    margin-bottom: 15px;
}

.about-me__link{
    font-size: 20px;
    color: #FF69B4;
    text-decoration: none;
    padding: 0 16px;
}

.about-me__img--container{
    flex: 1;
    display: flex;
    align-items: center;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Annette</title>
  <link rel="stylesheet" href="./css/styles.css">
  <script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <section id="about-me">
      <nav>
        <div class="personal_logo">Annette</div>
        <ul class="nav__link--list">
          <li class="nav__Link">
            <a href="#languages" class="
            nav__link--anchor
            link__hover-effect
            link_hover-effect--black"
            >Languages</a>
          </li>
          <li class="nav__link">
          <a href="#projects" class="
          nav__link--anchor
          link__hover-effect
          link_hover-effect--black">
          Projects</a>
        </li>
        <li class="nav__link">
        <a href="" class=
        "nav__link--anchor
        nav__link--anchor-primary" 
        >Contact</a>
      </li>
        </ul>
      </nav>
      <div class="flex flex-1">
        <div class=".about-me__info row"> <!--inside the row, there are 2 sections: information and image-->
        <div class="about-me__info--container">
        <figure class="about-me--picture--mask">
        <img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
         </figure> <!--this contains my image -->
        <h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>
        <p class="about-me__info--para">
                I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>  
            </p>
            <div class="about-me__links"></div>
            <a href="" class="about-me__link">
                <i class="fa-brands fa-linkedin"></i>
            </a>
            <a href="" class="about-me__link">
                <i class="fa-brands fa-github"></i>
            </a>
            <a href="" class="about-me__link">
                <i class="fa-solid fa-inbox"></i>
            </a>
            <a href="" class="about-me__link">
                <i class="fa-solid fa-file-pdf"></i>
            </a>
        </div>
        </div>
        <figure class="about-me__img--container">
          <img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
        </figure>
      </div>
    </section>
  </body>
</html>

javascript html css

Answer 1

Answer №1

Just a small adjustment needed for the markup. Move the image to its own div, positioned below the flex layout.

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap');
* {
  color: black;
  font-family: 'Lato', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
span {
  color: black;
  text-align: center;
  line-height: 1.25;
}

h1 {
  font-size: 36px;
}

p {
  line-height: 1.5;
  font-size: 16px;
}

li {
  list-style-type: none;
}

.flex {
  display: flex;
  /* this automatically aligns like columns or rows with auto width and auto height */
}

.flex-1 {
  flex: 1;
  /* this makes sure that it is the entire height of the  page */
}


/* Navigation bar */

.row {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.text-pink {
  color: #FF69B4;
}

nav {
  height: 100px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__link--list {
  display: flex;
}

.nav__link--anchor {
  margin: 0 12px;
  color: black;
  text-decoration: none;
  font-weight: 700;
}

.nav__link--anchor-primary {
  background-color: #FF69B4;
  padding: 8px 20px;
  border-radius: 50px;
  color: white;
  transition: all 300ms ease;
}

.nav__link--anchor-primary:hover {
  background-color: #FF69B4;
}

.personal_logo {
  font-size: 20px;
  color: #FF69B4;
  margin: 0 12px;
  font-weight: bold;
}


/* About mE */

#about-me {
  min-height: 100vh;
  /* entire height of the page */
  display: flex;
  flex-direction: column;
}

.about-me__info {
  display: flex;
  flex-direction: column;
}

.about-me__info--container {
  display: flex;
  flex-direction: column;
  /* so it is not side-by-side */
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.about-me--picture--mask {
  width: 180px;
  height: 180px;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
  margin-bottom: 20px;
}

.about-me__picture {
  width: 100%;
  transform: scale(1, 1.1);
  padding-top: 7px;
}

.about-me__info--para {
  font-size: 15px;
  margin-bottom: 28px;
}

.about-me__info--title {
  margin-bottom: 15px;
}

.about-me__link {
  font-size: 20px;
  color: #FF69B4;
  text-decoration: none;
  padding: 0 16px;
}

.about-me__img--container {
  flex: 1;
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Annette</title>
  <link rel="stylesheet" href="./css/styles.css">
  <script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>

<body>
  <section id="about-me">
    <nav>
      <div class="personal_logo">Annette</div>
      <ul class="nav__link--list">
        <li class="nav__Link">
          <a href="#languages" class="
            nav__link--anchor
            link__hover-effect
            link_hover-effect--black">Languages</a>
        </li>
        <li class="nav__link">
          <a href="#projects" class="
          nav__link--anchor
          link__hover-effect
          link_hover-effect--black">
                        Projects</a>
        </li>
        <li class="nav__link">
          <a href="" class="nav__link--anchor
        nav__link--anchor-primary">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="flex flex-1">
      <div class=".about-me__info row">
        <!--inside the row, there is 2 sections: infromation and image-->
        <div class="about-me__info--container">
          <figure class="about-me--picture--mask">
            <img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
          </figure>
          <!--this contains my image -->
          <h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>

          <p class="about-me__info--para">
            I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
            and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
          </p>
          <div class="about-me__links">
            <a href="" class="about-me__link">
              <i class="fa-brands fa-linkedin"></i>
            </a>
            <a href="" class="about-me__link">
              <i class="fa-brands fa-github"></i>
            </a>
            <a href="" class="about-me__link">
              <i class="fa-solid fa-inbox"></i>
            </a>
            <a href="" class="about-me__link">
              <i class="fa-solid fa-file-pdf"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div>
      <figure class="about-me__img--container" >
        <img src="https://picsum.photos/200" alt="" style="margin: auto">
      </figure>
    </div>
  </section>
</body>

</html>

Answer 2

Just a small adjustment needed for the markup. Move the image to its own div, positioned below the flex layout.

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap');
* {
  color: black;
  font-family: 'Lato', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
span {
  color: black;
  text-align: center;
  line-height: 1.25;
}

h1 {
  font-size: 36px;
}

p {
  line-height: 1.5;
  font-size: 16px;
}

li {
  list-style-type: none;
}

.flex {
  display: flex;
  /* this automatically aligns like columns or rows with auto width and auto height */
}

.flex-1 {
  flex: 1;
  /* this makes sure that it is the entire height of the  page */
}


/* Navigation bar */

.row {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.text-pink {
  color: #FF69B4;
}

nav {
  height: 100px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__link--list {
  display: flex;
}

.nav__link--anchor {
  margin: 0 12px;
  color: black;
  text-decoration: none;
  font-weight: 700;
}

.nav__link--anchor-primary {
  background-color: #FF69B4;
  padding: 8px 20px;
  border-radius: 50px;
  color: white;
  transition: all 300ms ease;
}

.nav__link--anchor-primary:hover {
  background-color: #FF69B4;
}

.personal_logo {
  font-size: 20px;
  color: #FF69B4;
  margin: 0 12px;
  font-weight: bold;
}


/* About mE */

#about-me {
  min-height: 100vh;
  /* entire height of the page */
  display: flex;
  flex-direction: column;
}

.about-me__info {
  display: flex;
  flex-direction: column;
}

.about-me__info--container {
  display: flex;
  flex-direction: column;
  /* so it is not side-by-side */
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.about-me--picture--mask {
  width: 180px;
  height: 180px;
  border-radius: 100%;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
  margin-bottom: 20px;
}

.about-me__picture {
  width: 100%;
  transform: scale(1, 1.1);
  padding-top: 7px;
}

.about-me__info--para {
  font-size: 15px;
  margin-bottom: 28px;
}

.about-me__info--title {
  margin-bottom: 15px;
}

.about-me__link {
  font-size: 20px;
  color: #FF69B4;
  text-decoration: none;
  padding: 0 16px;
}

.about-me__img--container {
  flex: 1;
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Annette</title>
  <link rel="stylesheet" href="./css/styles.css">
  <script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>

<body>
  <section id="about-me">
    <nav>
      <div class="personal_logo">Annette</div>
      <ul class="nav__link--list">
        <li class="nav__Link">
          <a href="#languages" class="
            nav__link--anchor
            link__hover-effect
            link_hover-effect--black">Languages</a>
        </li>
        <li class="nav__link">
          <a href="#projects" class="
          nav__link--anchor
          link__hover-effect
          link_hover-effect--black">
                        Projects</a>
        </li>
        <li class="nav__link">
          <a href="" class="nav__link--anchor
        nav__link--anchor-primary">Contact</a>
        </li>
      </ul>
    </nav>
    <div class="flex flex-1">
      <div class=".about-me__info row">
        <!--inside the row, there is 2 sections: infromation and image-->
        <div class="about-me__info--container">
          <figure class="about-me--picture--mask">
            <img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
          </figure>
          <!--this contains my image -->
          <h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe 👋 </span> </h1>

          <p class="about-me__info--para">
            I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
            and designing projects on topics that I’m interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
          </p>
          <div class="about-me__links">
            <a href="" class="about-me__link">
              <i class="fa-brands fa-linkedin"></i>
            </a>
            <a href="" class="about-me__link">
              <i class="fa-brands fa-github"></i>
            </a>
            <a href="" class="about-me__link">
              <i class="fa-solid fa-inbox"></i>
            </a>
            <a href="" class="about-me__link">
              <i class="fa-solid fa-file-pdf"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div>
      <figure class="about-me__img--container" >
        <img src="https://picsum.photos/200" alt="" style="margin: auto">
      </figure>
    </div>
  </section>
</body>

</html>

Ways to adjust the positioning of an image

Answer №1

Similar questions

What's the best approach for revalidating data with mutate in SWR?

Establishing a primary data format for a backbone collection

Utilizing jQuery for JSON parsing

Trigger a fire event upon entering a page containing an anchor

"Automating the process of toggling the edit mode of a contenteditable element – how is

Accessing a Dropdown List through PHP in an HTML Document

The function of window.location is not responsive when used in conjunction with an ajax

Addressing three visual problems with an html form input, dropdown menu, and clickable button

How do I use jQuery to animate a height increase where the added height is applied to the top of the element?

Is it necessary for the paths in an HTML file to be full paths when utilizing Express.static in Node.js?

Having trouble with the Bootstrap dropdown? The unordered list isn't dropping down as expected. What could be the issue?

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

What is the best way to access a local variable within a POST method in Node.js?

Alter the color of the span text without affecting the :before or :after elements

Colored stripe on a horizontal menu

The React-native application initialized using npx create-react-app encountered an error and could not launch

Place the element at the bottom of the row above

Is there a way for me to view the names of the images I am uploading on the console?

Verifying dynamic number inputs generated using JavaScript values and calculating the total with a MutationObserver

The JQuery datepicker fails to display the current date