tl;dr Quando coloco um width no container do texto ele não quebra as linhas pra otimizar o espaço.
Sem definir nada o texto fica normal, e se eu redefinir o tamanho da tela ele vai quebrando naturalmente.
Mas não quero que ele ocupe toda a tela e pensei em definir um tamanho pra ele ocupar.
Porém ao definir um tamanho especifico, o texto para de quebrar naturalmente se necessário...
Codigo no codepen: https://codepen.io/utamo/pen/ErQegM
Fiz alguns <br>
e "resolvi"o problema, mas queria que o mesmo ocorresse num container com tamanho especifico pra distribuição do texto ficar melhor.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fira Sans', sans-serif;
text-decoration: none;
list-style-type: none;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 50ch auto;
grid-template-areas:
"topo topo" /* querie geral */
"meio meio"
"baixo baixo"
}
.header-container {
grid-area: topo;
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas:
"left right"; /* sub grid do topo */
}
/* Header left side */
.leftz {
grid-area: left;
background: linear-gradient(
rgba(89, 53, 15, 0.7),
rgba(0, 0, 0, 0.7)
),url(imgs/matoi.png);
background-size: cover;
background-color: black;
opacity: 0.7;
display: flex;
justify-content: space-between;
padding: 1rem;
align-items: center;
border-bottom: 2px solid orange;
}
.logo-text {
color: #f3f3f3;
display: flex;
line-height: 1.3rem;
align-items: center;
}
.japword {
align-self: center;
font-size: 3rem;
color: #ffb808;
}
.orange {
color: orange;
}
.pointrem {
font-size: .8rem;
text-align: center
}
/* menu responsive */
.responsive-menu {
display: none;
}
.hidden-search {
padding: 1rem;
position: relative;
display: flex; /* vai usar isso no querie */
align-items: center;
flex-direction: row-reverse;
justify-content: center;
}
.fas {
color: white;
}
/* Header right side */
.rightx {
display: flex;
justify-content: space-between;
align-items: center;
grid-area: right;
background: #f1f1f1;
border-bottom: 2px solid #ffc04c;
}
.rightx ul {
display: flex;
}
.rightx a {
margin: .6rem;
color: black;
}
/* Search bar */
.search-form {
display: flex;
border: none;
padding: .5rem;
}
.search-form input[type="text"] {
padding: .2rem;
border: none;
}
.search-form button[type="submit"] {
padding: .5rem;
border: none;
background: #e7c88f;
}
.mid-container {
grid-area: meio;
background: url(imgs/mako2.png);
background-position: right;
background-repeat: no-repeat;
background-color: #fff4e3;
}
.text-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 50ch;
}
/* Queries */
@media only screen and (max-width:860px) {
.header-container {
grid-template-areas:
"left left";
}
.rightx {
display: none;
}
.leftz {
background-position: 50% 30%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Anton|Fira+Sans|Oswald|Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="grid-container">
<!-- Parte do topo -->
<div class="header-container">
<!-- Parte esq do header -->
<div class="leftz">
<div class="logo-text">
<h1><span class="japword">た</span></h1>
<div>
<h1>/A/nime</h1>
<p class="pointrem">私たちを捕まえる</p>
</div>
</div>
<!-- Menu falho que n tentei direito com CSS -->
<div class="hidden-search">
<i class="fas fa-bars"></i>
<div class="responsive-menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Animes</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
</div>
</div>
<!-- Parte dir do header -->
<div class="rightx">
<div> <!-- Menu -->
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Animes</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
<div> <!-- Searh bar -->
<form class="search-form">
<input type="text" placeholder="Find something new...">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<!-- Começo do meio -->
<div class="mid-container">
<div class="mid-texts">
<div class="text-container">
<p>ACTION, ADVENTURE</p>
<h1>NEW KILL LA KILL EPISODES</h1>
<p>The team that brought you Gurren lagann and panty & Stocking reunited to present what is looking to be one of the most over the top action series in a long time!</p>
</div>
</div>
</div>
</div>
</body>
</html>