Good night, I am developing a project and I need that after the text "Malha Suprema - Judas" he should wrap the line for the text "ACERT" to go down, but for some reason the
n works. I use the flex display and when I press it for some reason my text "Acert" loses the css. Does anyone know how I can solve this problem?
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;500&display=swap");
:root {
--dark: #333;
--lightDark: #444;
}
*{
margin: 0;
padding: 0;
}
body{
background: var(--dark);
touch-action: none;
}
div.musicPhoto img{
border-radius: 100%;
width: 180px;
height: 180px;
}
.btnPlayer{
display: flex;
align-items: center;
margin-left: auto;
}
div.btnPlayer .playerImg{
font-size: 80px;
color: #FFF;
}
div.btnPlayer .playerBtn{
cursor: pointer;
outline: none;
border: none;
background: transparent;
}
div.musicData{
display: flex;
align-items: center;
margin-left: 15px;
}
div.musicData p{
font-family: "Oswald", sans-serif;
}
div.musicData p:nth-child(1){
font-size: 40px;
font-weight: 500;
color: #FFF;
}
div.musicData p:nth-child(2){
font-weight: 300;
font-size: 33px;
color: #ebebeb;
}
div.musicItem{
cursor: pointer;
border-radius: 15px;
background: var(--lightDark);
width: 93%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
padding: 15px;
margin: 2% auto;
}<html>
<head>
<title>SpotCode</title>
<meta charset="utf-8" />
</head>
<body>
<div class="musicItem">
<div class="musicPhoto">
<img src="assets/images/3348986.jpg">
</div>
<div class="musicData">
<p>Malha Suprema - Judas</p>
<p>ACERT</p>
</div>
<div class="btnPlayer">
<button class="playerBtn">
<span class="playerImg">
<i class="far fa-play-circle"></i>
</span>
</button>
</div>
</div>
</body>
</html>