特定の画面サイズを下回った場合に、テキストの部分を画面幅いっぱいに広げたいのですがうまく広がりません。
以下のコードHTMLにおいて、<div class="info">
の<p>
の部分が該当箇所です。
見本サイト: https://code-jump.com/demo/html/ec/#
@charset "UTF-8";
.header {
max-width: 1000px;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
}
.wrapper {
max-width: 1000px;
margin: 0 auto;
}
.header {
width: 100%;
}
.headerlogo {
text-align: center;
padding-top: 50px;
}
.headerlogo img {
width: 100px;
text-align: center;
padding-bottom: 30px;
}
.headerlist {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ccc;
margin-bottom: 50px;
}
.menu {
display: flex;
list-style: none;
padding-bottom: 15px;
gap: 20px;
}
.login {
display: flex;
list-style: none;
gap: 20px;
}
.totallycontents {
max-width: 800px;
display: flex;
}
.totally img {
width: 100%;
align-items: center;
}
.info {
width: 100%;
padding-left: 50px;
}
.info p {
padding-top: 20px;
}
h1 {
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #ccc;
font-size: 15px;
padding: 20px 0px;
}
.button {
border: 1px solid;
padding: 15px 40px;
margin-top: 15px;
text-align: center;
background-color: black;
}
.button a {
color: white;
}
.table2 th {
border: 1px solid;
border-collapse: collapse;
background-color: #ccc;
}
.table2 td {
border: 1px solid;
border-collapse: collapse;
text-align: center;
}
.table2 {
border: 1px solid;
border-collapse: collapse;
margin-top: 30px;
width: 100%;
height: 150px;
}
footer {
text-align: center;
font-size: 12px;
padding-top: 15px;
}
@media (width:896px) {
.header {
padding: 0px 5%;
margin: 0 auto;
}
.wrapper {
padding: 0px 5%;
margin: 0 auto;
}
.headerlist {
display: flex;
justify-content: space-between;
border-bottom: none;
margin-bottom: 0;
}
.totallycontents {
max-width: 100%;
display: flex;
flex-direction: column;
}
.totally img {
width: 100%;
align-items: center;
}
.info p {
width: 100%;
}
}
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TOTALLY</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- googleフォントでフォントを選んでみましょう! -->
</head>
<header>
<section class="header">
<div class="headerlogo">
<a href="#"><img src="img/logo.svg" alt=""></a>
</div>
<div class="wrapper">
<nav class="headerlist">
<ul class="menu">
<li><a href="#">ALL</a></li>
<li><a href="#">NEW</a></li>
<li><a href="#">VINTAGE</a></li>
<li><a href="#">CATEGORY</a></li>
<li><a href="#">LOOKBOOK</a></li>
<li><a href="#">BLOG</a></li>
</ul>
<ul class="login">
<li><a href="#">LOGIN</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</section>
</header>
<main>
<div class="wrapper">
<div class="totallycontents">
<div class="totally">
<img src="img/item.jpg" alt="">
</div>
<div class="info">
<h1>TOTALLY Short Sleeve Shirt</h1>
<p>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキスト
</p>
<p>¥9,999 +tax</p>
<table class="table1">
<table>
<tbody>
<tr>
<th>Color</th>
<th>Size</th>
<th class="quantity"></th>
</tr>
<tr>
<th>White</th>
<td>S</td>
<td><select name="sample">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select></td>
</tr>
<tr>
<th>White</th>
<td>M</td>
<td><select name="sample">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</td>
</tr>
<tr>
<th>White</th>
<td>L</td>
<td><select name="sample">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</td>
</tr>
</tbody>
</table>
</table>
<div class="button">
<a href="#">ADD TO CART</a>
</div>
<table class="table2">
<tbody>
<tr>
<th>Size</th>
<th>Chest</th>
<th>West</th>
<th>Height</th>
</tr>
<tr>
<th>S</th>
<td>99~99</td>
<td>99~99</td>
<td>99~99</td>
</tr>
<tr>
<th>M</th>
<td>99~99</td>
<td>99~99</td>
<td>99~99</td>
</tr>
<tr>
<th>L</th>
<td>99~99</td>
<td>99~99</td>
<td>99~99</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<footer>
© TOTALLY
</footer>
</html>