All I am trying to do is put the profile picture image on the side of the text and get it to stay there. However, the image moves down and off the block when the window is at full size, as shown in the link. I've tried so many different solutions and none seem to work, would really appreciate the help. Thanks.
Here is the link: https://codepen.io/Tantlu/full/JjyVrZZ
body, html, main {
height: 100%;
font-size: 10px;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.header {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
color: #fff;
font-family: 'Lexend', sans-serif;
}
h1 {
font-size: 6rem;
text-transform: uppercase;
letter-spacing: 3.5px;
}
h2 {
font-size: 2rem;
letter-spacing: 1rem;
}
h3 {
text-transform: uppercase;
font-size: 3rem;
font-family: 'Lexend', sans-serif;
text-align: center;
}
p {
font-size: 2rem;
font-weight: 100;
text-align: justify;
}
.img1 {
width: 25%;
border-radius: 50%;
margin-left: 5%;
float: right;
}
/* Blocks */
.block {
padding: 70px 150px;
}
.block-light {
background-color: #fff;
color: black;
}
.block-dark {
background-color: #080c14;
color: white;
}
/* Parrallax */
.px1, .px2, .px3 {
position: relative;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.px1 {
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://64.media.tumblr.com/e5bfc63c34477d3e1b648a4f09aa9afb/tumblr_p5lsy5Ac1H1uhx88zo1_500.gifv');
min-height: 100%;
}
.px2 {
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://www.wallpaperflare.com/static/155/335/658/digital-art-artwork-landscape-sword-wallpaper.jpg);
min-height: 400px;
}
.px3 {
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://mocah.org/uploads/posts/583541-sword-art-online.jpg);
min-height: 400px;
}
@media(max-width: 568px) {
.px1, .px2, .px3{background-attachment: scroll;}
}<main id="main">
<div class="px1">
<div class="header">
<h2>手塚 治虫</h2>
<h1 id="title">Osamu Tezuka</h1>
</div>
</div>
<div class="block block-light">
<h3>The father of anime</h3>
<img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg"/>
<p>Known as the Godfather of Manga and Anime, Osamu Tezuka (手塚 治虫) was born 3rd November, 1928 and died February 9th, 1989. Tezuka was a Japanese manga artist, animator and cartoonist. In 1968 he founded Tezuka Productions Co (手塚プロダクション) and Mushi Productions.</p>
</div>
<div class="px2">
<span class="border">
Sword Art Online
</span>
</div>I added display: flex; to your block-light class and aligned everything to the center. Also, for good measures, I added a class called left to avoid off word spacing, I added text-align: center; you can do whatever. I would suggest using media queries to adjust the sizing of all the applicable elements for a responsive design. Also, added flex-direction: column; in media queries
body, html, main {
height: 100%;
font-size: 10px;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.header {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
color: #fff;
font-family: 'Lexend', sans-serif;
}
h1 {
font-size: 6rem;
text-transform: uppercase;
letter-spacing: 3.5px;
}
h2 {
font-size: 2rem;
letter-spacing: 1rem;
}
h3 {
text-transform: uppercase;
font-size: 3rem;
font-family: 'Lexend', sans-serif;
text-align: center;
}
p {
font-size: 1.7rem;
font-weight: 100;
text-align: left;
}
.left {
margin-left: 1.5rem;
}
/* media queries */
@media only screen and (max-width: 850px) {
.left {
text-align: : center;
}
.block-light {
background-color: #fff;
color: black;
display: flex;
flex-direction: column;
align-items: center;
}
/* img resizing -> min-width: 178px */
.img1 {
min-width: 178px !important;
min-height: auto;
}
}
.img1 {
width: 25%;
border-radius: 50%;
margin-left: 5%;
float: right;
}
/* Blocks */
.block {
padding: 70px 150px;
}
.block-light {
background-color: #fff;
color: black;
display: flex;
align-items: center;
}
.block-dark {
background-color: #080c14;
color: white;
}
/* Parrallax */
.px1, .px2, .px3 {
position: relative;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.px1 {
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://64.media.tumblr.com/e5bfc63c34477d3e1b648a4f09aa9afb/tumblr_p5lsy5Ac1H1uhx88zo1_500.gifv');
min-height: 100%;
}
.px2 {
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://www.wallpaperflare.com/static/155/335/658/digital-art-artwork-landscape-sword-wallpaper.jpg);
min-height: 400px;
}
.px3 {
background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://mocah.org/uploads/posts/583541-sword-art-online.jpg);
min-height: 400px;
}
@media(max-width: 568px) {
.px1, .px2, .px3{background-attachment: scroll;}
}<main id="main">
<div class="px1">
<div class="header">
<h2>手塚 治虫</h2>
<h1 id="title">Osamu Tezuka</h1>
</div>
</div>
<div class="block block-light">
<h3>The father of anime</h3>
<img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg"/>
<p class="left">Known as the Godfather of Manga and Anime, Osamu Tezuka (手塚 治虫) was born 3rd November, 1928 and died February 9th, 1989. Tezuka was a Japanese manga artist, animator and cartoonist. In 1968 he founded Tezuka Productions Co (手塚プロダクション) and Mushi Productions.</p>
</div>
<div class="px2">
<span class="border">
Sword Art Online
</span>
</div>Click full-page
EDIT: - added a sample media query that changes font-size below 850px.