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
CSS Code:
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;}
}
HTML until image code:
<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>
CodePudding user response：
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;
}
}
.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 800px.
CodePudding user response：
The image has float:right set which is fine, and probably what you want, when there is enough text to 'float' round the image. So it looks OK on narrower viewports.
On a wide screen it's still floated to the right but there isn't enough text to wrap around it.
Also as a float it doesn't set the height of its container.
One way to get the system to 'clear' both the text and the image before it draws the next element is to use clear: both
In your case put a clear: both in the CSS for .px2