Adjust the div container to wrap underneath the image if the webpage width decreases

Question

Adjust the div container to wrap underneath the image if the webpage width decreases

Hello there, I am currently in the process of creating my own portfolio. I have a brief introduction that I would like to display next to an image of myself, with the image positioned on the right side.

I have a div called "container" which contains another div where the image and introduction are placed like this:

    <body>
  <div class="content">
    <img src="images/sjforwebsite.png" alt="Luigi and his dog" width="600" height="auto"> 
    <div class="introduction">
      <h2>
        Hello, hello! <br>
        My name is Steven Johnston
      </h2>
      <p>
        Thank you for visiting. <br>
        You can refer to me as "Steve" if you'd like! <br>
        I'm 28 years old and currently looking for a web developer position.
      </p>
      <p> 
        I have a passion for web development. <br>
         Especially designing visually appealing, robust, user-friendly websites. </p>
      <p> 
        Apart from web development, <br>
        I enjoy playing video games, watching horror movies, and going for walks. </p>
      <p>
        I am proficient in Python, Java, Kotlin, HTML, CSS, and JavaScript. <br>
        Additionally, I work with Adobe XD and Ableton for music production.
      </p>
      <p> 
        Creating meaningful projects is what drives me, and I thrive in collaborative environments. 
      <br>
        I believe I could be a valuable asset to your team! Feel free to reach out anytime.
      </p>
   </div>
  </div>
</body>

Here are the CSS styles used:

.root {
  background-color: aliceblue;
  font-size: 62.5%;
}

.content {
  max-width:70%;
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
}

.introduction {
  border-radius: 5px;
  margin-top: 10rem;
  font-family: 'Source Sans Pro', sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 0.5rem;
}

I'm facing challenges in making the introduction div wrap below the image properly.

As shown in the images provided, when the webpage width decreases, I want the div to move under the image on the right. Any advice on achieving this layout adjustment would be much appreciated. Thank you.

https://i.stack.imgur.com/ke1nq.png https://i.stack.imgur.com/Ye9aY.png

html css

Answer 1

Answer №1

If you're utilizing the power of flexbox, why not make use of the flex-wrap property within your .content class? This way, your content will wrap appropriately when the screen size decreases:

.content {
  max-width:70%;
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap; /* --> Inserted here <-- */
  justify-content: center;
  align-items: center;
  max-width: 80rem;
}

Answer 2

If you're utilizing the power of flexbox, why not make use of the flex-wrap property within your .content class? This way, your content will wrap appropriately when the screen size decreases:

.content {
  max-width:70%;
  margin: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap; /* --> Inserted here <-- */
  justify-content: center;
  align-items: center;
  max-width: 80rem;
}

Answer 3

Answer №2

In this scenario, my recommendation would be to skip using flex entirely and instead opt for making the image a floated element (as demonstrated in the example below). This approach will allow the text to wrap around the image as intended.

(please note: I included width, height, and background color attributes to the image solely to ensure it takes up space in this code snippet, since the actual image is not available here)

.root {
  background-color: aliceblue;
  font-size: 62.5%;
}

.content {
  width: 100vw;
  height: 100vh;
  max-width: 80rem;
}

.content img {
  width: 300px;
  height: 400px;
  float: left;
  background: #ddd;
  margin: 0 10px 10px 0;
}

.introduction {
  border-radius: 5px;
  font-family: 'Source Sans Pro', sans-serif;
  padding: 0.5rem;
}

<div class="content">
  <img src="images/sjforwebsite.png" alt="Luigi and his dog" width="600" height="auto">
  <div class="introduction">
    <h2>
      Hello, hello! <br> My name is Steven Johnston
    </h2>
    <p>
      Thank you for coming over. <br> You can call me "Steve" if you want! <br> I'm 28 years old, and I am seeking a web developer position.
    </p>
    <p>
      I love web development. <br> just love designing websites that are visually stunning, robust, and satisfactory to the user. </p>
    <p>
      Other than web development, <br> I love playing video games, watching scary movies, and going on walks. </p>
    <p>
      I have experience with Python, Java, Kotlin, HTML, CSS, and Javascript. <br> Other technologies include Adobe XD, and Ableton for music production.
    </p>
    <p>
      I am passionate for creating meaningful work, and I love working with others.
      <br> I think I can be a great addition to your team! Feel free to contact me any time.
    </p>
  </div>
</div>

Answer 4

In this scenario, my recommendation would be to skip using flex entirely and instead opt for making the image a floated element (as demonstrated in the example below). This approach will allow the text to wrap around the image as intended.

(please note: I included width, height, and background color attributes to the image solely to ensure it takes up space in this code snippet, since the actual image is not available here)

.root {
  background-color: aliceblue;
  font-size: 62.5%;
}

.content {
  width: 100vw;
  height: 100vh;
  max-width: 80rem;
}

.content img {
  width: 300px;
  height: 400px;
  float: left;
  background: #ddd;
  margin: 0 10px 10px 0;
}

.introduction {
  border-radius: 5px;
  font-family: 'Source Sans Pro', sans-serif;
  padding: 0.5rem;
}

<div class="content">
  <img src="images/sjforwebsite.png" alt="Luigi and his dog" width="600" height="auto">
  <div class="introduction">
    <h2>
      Hello, hello! <br> My name is Steven Johnston
    </h2>
    <p>
      Thank you for coming over. <br> You can call me "Steve" if you want! <br> I'm 28 years old, and I am seeking a web developer position.
    </p>
    <p>
      I love web development. <br> just love designing websites that are visually stunning, robust, and satisfactory to the user. </p>
    <p>
      Other than web development, <br> I love playing video games, watching scary movies, and going on walks. </p>
    <p>
      I have experience with Python, Java, Kotlin, HTML, CSS, and Javascript. <br> Other technologies include Adobe XD, and Ableton for music production.
    </p>
    <p>
      I am passionate for creating meaningful work, and I love working with others.
      <br> I think I can be a great addition to your team! Feel free to contact me any time.
    </p>
  </div>
</div>

Adjust the div container to wrap underneath the image if the webpage width decreases

Answer №1

Answer №2

Similar questions

Ensuring User Input Integrity with JavaScript Prompt Validation

Issue: Map container not located when implementing a leaflet map with Angular

Assistance with Javascript Objects Using JSON and AJAX

Introducing HTML elements into pre-existing web pages

Avoid form submission when the 'enter' key is pressed in Edge, but not in Chrome or Firefox

What is the best way to assign specific codes to separate pages using a single JS file?

Reorganizing content under an image as the browser is resized by implementing a media query

The transparent overlay div does not activate when clicking on a button in Internet Explorer 10

"The issue of a malfunctioning selected option in a select dropdown within an AngularJS application

Tips for including a close button in a slidedown panel

Python is experiencing difficulties with copying xpath elements

Guide on making an SVG tooltip using the Menucool JS extension

CSS Problem: Background Color Not Showing Up in Table Rows

generate a flexible div that adjusts its height based on the size of the browser window

What could the possible reason behind the malfunctioning of my prepared statements for the insert operation?

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Ways to modify CSS using JavaScript

Text is overflowing from the table cell due to its length

The outcomes of using Wget versus Python requests may vary