Когда я изменяю размер окна для мобильного представления (ширина менее 550 пикселей), я хочу, чтобы столбцы растягивались на ширину в соответствии с размером окна.Вместо этого синий столбец немного меньше ширины области просмотра, а желтый, красный и зеленый столбцы слишком сильно уменьшаются.
это результат, который я получаю: https://imgur.com/Hl60iiy
эторезультат, который я хочу: https://imgur.com/cksNN7B
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
p{
font-size: 10px;
}
.inBody{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row-reverse;
}
.forAll{
height: inherit;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
white-space: nowrap;
display: flex;
align-items:center;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 20px;
width: 200px;
line-height: 5px;
}
.content{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.opened{
display: none;
}
.close{
display: none;
}
@media (max-width: 550px){
.inBody{
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll{
height: 100vh;
width: 100%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="no-gutters">
<div class="fluid-container inBody">
<div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary">
<h2 class="verticalOption opened" id="menuHome"><a href="#" id="home">Sample</a></h2>
<div class="container content allContent" id="homeContent">
<h1>HOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col-1 col2 forAll bg-warning">
<h2 class="verticalOption" id="menuAbout"><a href="#" id="about">Sample</a></h2>
<div class="container content close allContent" id="aboutContent">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col-1 col3 forAll bg-danger">
<h2 class="verticalOption" id="menuContact"><a href="#" id="contact">Contact Me</a></h2>
<div class="container content allContent close" id="contactContent">
<h1>Sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm1 col-1 col4 forAll bg-success">
<h2 class="verticalOption" id="menuPortfolio"><a href="#" id="portfolio">Sample</a></h2>
<div class="container content allContent close" id="portfolioContent">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>