Issue
I am not familiar with the html and css. I have a header which the contents at down but their alignment is is not correct and I am unable to properly. For eg: PLAY and Play on Spotify are on different side. I need correct content at heading correctly. I uses body_content .title span:nth-child() with width for the title and .body_content .list span:nth-child for the content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Top Songs Spotify</title>
<style>
body{
background-color: #0f0f1b;
font-family: 'Source Sans Pro', sans-serif;
font-weight: normal;
color: #fff;
min-height: 1000px;
letter-spacing: .6px;
}
.container{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
header{
text-align: center;
}
header h1{
font-size: 30px;
font-weight: 400;
margin-bottom: 0;
}
header h3{
font-size: 20px;
font-weight: 400;
margin-bottom: 0;
}
.body_content{
margin-top: 30px;
}
.body_content .title{
background: #414072;
color: #fff;
padding: 20px 5px;
border-radius: 10px;
display: flex;
}
.body_content .title span{
font-size: 15px;
}
.body_content .title span:nth-child(1)
{
width: 60%;
}
.body_content .title span:nth-child(2){
width: 40%;
}
.body_content .title span:nth-child(3){
width: 20%;
}
.body_content .list{
position: relative;
padding: 15px 5px;
background: #000;
border: 1px solid transparent;
border-radius: 10px;
margin-top: 25px;
display: flex;
align-items: center;
}
.body_content .list span{
font-size: 15px;
}
.body_content .list span:nth-child(1){
width: 50%;
}
.body_content .list span:nth-child(2){
width: 40%;
}
.body_content .list span:nth-child(3){
width: 10%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<h1>TOP PICKED SPOTIFY SONGS</h1>
<h3>Welcome User</h3>
</header>
<div class="body_content">
<div class="title">
<span>TITLE</span>
<span>ARTIST</span>
<span>PLAY</span>
</div>
<div class="list">
<span>Song123</span>
<span>Artist 123</span>
<span>Play on Spotify</span>
</div>
</div>
</div>
</div>
</body>
</html>
Is there any solution to properly align the text for the html
Solution
i have adjusted some CSS property for solve your issue i hope helpful this:
.container{
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
header{
text-align: center;
}
header h1{
font-size: 30px;
font-weight: 400;
margin-bottom: 0;
}
header h3{
font-size: 20px;
font-weight: 400;
margin-bottom: 0;
}
.body_content{
margin-top: 30px;
}
.body_content .title{
background: #414072;
color: #fff;
border-radius: 10px;
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
font-size: 15px;
font-weight: bold;
}
.body_content .list{
position: relative;
background: #000;
border: 1px solid transparent;
border-radius: 10px;
margin-top: 10px;
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
align-items: center;
font-size: 15px;
color: #ccc;
}
.body_content .title span,
.body_content .list span{padding: 15px 10px;}
<div class="container">
<header>
<h1>TOP PICKED SPOTIFY SONGS</h1>
<h3>Welcome User</h3>
</header>
<div class="body_content">
<div class="title">
<span>TITLE</span>
<span>ARTIST</span>
<span>PLAY</span>
</div>
<div class="list">
<span>Song123</span>
<span>Artist 123</span>
<span>Play on Spotify</span>
</div>
<div class="list">
<span>Song123</span>
<span>Artist 123</span>
<span>Play on Spotify</span>
</div>
<div class="list">
<span>Song123</span>
<span>Artist 123</span>
<span>Play on Spotify</span>
</div>
</div>
</div>
Answered By - Mahesh Prajapati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.