У меня возникают некоторые проблемы с изменением размера окна (сжатие). Когда я уменьшаю его, цвета фона больше не остаются на краю области просмотра, а содержимое выходит за его пределы.
Я думал, что установка width для всего body на 100% исправит это, но это не так?
Вот JSFiddle моего текущего кода для страницы индекса и таблицы стилей:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item"><a href="about.html" target="_self">About Us</a></div>
<div class="flex-item"><a href="cakes.html" target="_self">Cakes</a></div>
<div class="flex-item"><a href="cupcakes.html" target="_self">Cupcakes</a></div>
<div class="flex-item"><a href="gallery.html" target="_self">Gallery</a></div>
<div class="flex-item"><a href="ordering.html" target="_self">Prices/Order</a></div>
<div class="flex-item"><a href="search.html" target="_self">Search</a></div>
</div>
</div>
<header class="header-container">
<a href="index.html" target="_self"><img src="TCCLogo.png" class="logo" /></a>
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<a href="cakes.html"><img src="cake.png" /></a>
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<a href="cupcakes.html"><img src="cupcake.png" /></a>
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<a href="ordering.html"><img src="prices.png" /></a>
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
Я попытался просмотреть таблицу стилей, изменив ширину всего, что я установил, с использованием пикселей в процентах, но, похоже, это не помогло. Единственное, что-то вроде работало, это изменение положения тела на фиксированное, но тогда ни один контент не был доступен для просмотра, если его уменьшали, все, что он исправлял, - это поддерживал цвета фона / верхнего / нижнего колонтитула одинаковыми.
Я думаю, что, возможно, мое кодирование немного запутано - я изо всех сил старался быть расширяемым, но быть на 100% новым в этом затрудняло.