Having issues aligning text next to an image
Question
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
@media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
@media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
3 answers
solution1
0 2020-06-30 16:41:56
Add a float property to the.avatar_img class
.avatar_img {
float: left;
}
solution2
0 ACCPTED 2020-06-30 18:13:18
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables. Next here is the css:
@media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius , border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
solution3
0 2020-06-30 18:52:18
Wrap title__text and secondary__text inside div ,
and then wrap avatar__img and title inside flexbox div .
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd . Hope it helps you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.