How can I wrap an image only when the page is at minimum viewport size? - html

Question

I'm currently following TOP (The Odin Project) curriculum and working on my landing page project, so I'm trying to make it as responsive as possible.
How can I put the header's image below the sign up button once I minimize the page?
I've tried to use flex-wrap: wrap; but it'll not work because it wraps when the page is maximized.
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
flex-wrap: wrap;
}
My code
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
/* blue container, first container */
.dark-blue {
background-color: #1f2937;
display: flex;
flex: 1 1 0;
padding-left: 10%;
padding-right: 10%;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 5%;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
flex: 1 1 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 1;
gap: 1rem;
flex-wrap: wrap;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 95%;
display: flex;
flex: 1 1 auto;
padding-bottom: 1rem;
}
.secondary-text {
padding-bottom: .5rem;
font-size: 18px;
max-width: 80%;
color: #e5e7eb;
display: flex;
flex: 1 1 auto;
justify-content: start;
padding-bottom: 1rem;
}
.about-text {
padding-bottom: 5%;
display: flex;
flex-direction: column;
}
.button-one {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #126e32;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.header-image {
width: 45%;
height: 18%;
border-radius: 2px;
display: flex;
flex-shrink: 0;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
padding-top: 5rem;
padding-bottom: 2rem;
flex: 1 1 auto;
}
.image img {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
display: flex;
}
.image img:hover {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
box-shadow: 0 5px 12px 0px rgba(8, 8, 8, 0.199);
}
.subtext {
color: #1f2937;
width: 17rem;
text-align: center;
padding-top: .5rem;
padding-bottom: 1rem;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
gap: 1%;
flex-wrap: wrap;
padding-bottom: 8rem;
}
/* third container, quote container */
.quote {
background-color: #e5e7eb;
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
padding-left: 25%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 10%;
}
.quote-text {
font-size: 36px;
color: #1f2937;
font-style: italic;
font-weight: 100;
width: 100%;
padding-bottom: 0;
}
.author {
font-size: 24px;
color: #1f2937;
font-weight: 900;
width: 90%;
display: flex;
flex-shrink: 1;
padding-left: 70%;
}
/* fourth container, box action */
.action {
background-color:#F9FAF8;
height: 30rem;
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 auto;
}
.box-action {
background-color: #1DB954;
border-radius: 2px;
box-shadow: 0 5px 8px 0px rgba(8, 8, 8, 0.145);
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 auto;
flex-wrap: wrap;
width: 50%;
padding: 5%;
padding-left: 10%;
padding-right: 10%;
gap: 2rem;
}
.action-title {
font-size: 32px;
color: #F9FAF8;
font-weight: bolder;
display: flex;
flex-shrink: 1;
}
.action-subtext {
color: #e5e7eb;
font-size: 18px;
font-weight: lighter;
display: flex;
flex-shrink: 1;
}
.button-two {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
border: 2px solid #F9FAF8;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-two:hover {
color: #1DB954;
font-weight: bold;
background-color: #F9FAF8;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text-two {
color: #F9FAF8;
}
.button-text-two:hover {
color: #1DB954;
}
/* Footer */
footer {
color: #e5e7eb;
font-weight: lighter;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White</title>
<link rel="icon" href="images/blackandwhite.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header dark-blue">
<div class="logo">black and white</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#photos">photos</a></li>
<li><a class="link-text" href="#sign-up">sign up</a></li>
</div>
</div>
<div class="about dark-blue">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey.
There are good things and bad things in every era, and
it's kind of very blindfolded to say one era was wonderful,
as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/header-image.jpeg">
</div>
<section id ="photos"></section>
<div class="information">
<div class="information-header-text">Check some black and white photos</div>
<div class="image-subtext">
<div class="one">
<a href="https://images.unsplash.com/reserve/yZfr4jmxQyuaE132MWZm_stagnes.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80">
<div class="image"><img src="./images/rocks.jpeg" alt="Monochrome coastal rocks"></div>
</a>
<div class="subtext">Monochrome coastal rocks</div>
</div>
<div class="two">
<a href="https://images.unsplash.com/photo-1574402897005-74dbf3f19be6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<div class="image"><img src="./images/stairway.jpeg" alt="Stairway from metro station"></div>
</a>
<div class="subtext">Stairway from metro station</div>
</div>
<div class="three">
<a href="https://images.unsplash.com/photo-1603157259666-71adcb873119?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<div class="image"><img src="./images/cat.jpeg" alt="Cat eyes"></div>
</a>
<div class="subtext">Cat eyes</div>
</div>
<div class="four">
<a href="https://images.unsplash.com/photo-1452727333656-23ae1299777a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80">
<div class="image"><img src="./images/truck.jpeg" alt="Monochrome vintage truck"> </div>
</a>
<div class="subtext">Monochrome vintage truck</div>
</div>
</div>
<div class="quote">
<div class="quote-text">
Although humans see reality in colour, for me,
black and white has always been connected to the image's deeper truth,
to its most hidden meaning.
</div>
<div class="author">
- Peter Lindbergh
</div>
</div>
</div>
<section id ="sign-up"></section>
<div class="action">
<div class="box-action">
<div class="action-text">
<div class="action-title">More photos?</div>
<div class="action-subtext">Sign up for more beautiful black and white pictures!
</div>
</div>
<div class="button-two">
<a class="button-text-two" href="#">Sign up</a>
</div>
</div>
</div>
<footer class="dark-blue">
Copyright © The Odin Project 2023
</footer>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
/* blue container, first container */
.dark-blue {
background-color: #1f2937;
display: flex;
flex: 1 1 0;
padding-left: 10%;
padding-right: 10%;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 5%;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
flex: 1 1 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 1;
gap: 1rem;
flex-wrap: wrap;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 95%;
display: flex;
flex: 1 1 auto;
padding-bottom: 1rem;
}
.secondary-text {
padding-bottom: .5rem;
font-size: 18px;
max-width: 80%;
color: #e5e7eb;
display: flex;
flex: 1 1 auto;
justify-content: start;
padding-bottom: 1rem;
}
.about-text {
padding-bottom: 5%;
display: flex;
flex-direction: column;
}
.button-one {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #126e32;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.header-image {
width: 45%;
height: 18%;
border-radius: 2px;
display: flex;
flex-shrink: 0;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
padding-top: 5rem;
padding-bottom: 2rem;
flex: 1 1 auto;
}
.image img {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
display: flex;
}
.image img:hover {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
box-shadow: 0 5px 12px 0px rgba(8, 8, 8, 0.199);
}
.subtext {
color: #1f2937;
width: 17rem;
text-align: center;
padding-top: .5rem;
padding-bottom: 1rem;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
gap: 1%;
flex-wrap: wrap;
padding-bottom: 8rem;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White</title>
<link rel="icon" href="images/blackandwhite.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header dark-blue">
<div class="logo">black and white</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#photos">photos</a></li>
<li><a class="link-text" href="#sign-up">sign up</a></li>
</div>
</div>
<div class="about dark-blue">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey.
There are good things and bad things in every era, and
it's kind of very blindfolded to say one era was wonderful,
as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/header-image.jpeg">
</div>
</body>
</html>

Answer 1

You could add a media query that switches the flex direction between row and column when the viewport crosses a particular width threshold.
Might look something like this:
.about {
display: flex;
flex-direction: row;
}
#media (max-width: 600px) {
.about {
flex-direction: column;
}
}
<div class="about">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey. There are good things and bad things in every era, and it's kind of very blindfolded to say one era was wonderful, as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img src="//placekitten.com/300/300">
</div>
This is difficult to demonstrate on StackOverflow due to the snippet framing, but if you full-screen the snippet above and adjust your window size you'll see it snap to column orientation when your window is narrower than 600px.
You could also do this with a container query if you need to base it on a parent element width instead of the entire viewport.

Answer 2

If you mean that you want the image to move when you're reducing the size of the page (rather than minimizing it, i.e. hiding it completely), you could add some media queries to your CSS.
Try adding
#media screen and (max-width: 1200px) {
.about{
flex-direction: column;
}
(setting the px breakpoints for the size you want) and see if it works!