I have a simple exercise that I have to take a footer and respond to it and I am not allowed to use media. But I do not know how to do this with min-width and max-width.
Of course, I did one part, but every part I make, another part will be ruined.
For convenience, I gave each box of background-color or border.
Now the yellow div goes down at 1040 pixels and the whole right side is empty, and when it gets smaller than about 400 pixels, the divs have to be scrolled horizontally. I do not know how to solve the problem.
Although I gave the divs with blue border (.boxes__small) a min-width, they do not get that small and only work when I remove the min-width in (.boxes__large):
Code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
direction: ltr;
}
html {
font-size: 62.5%;
/* == font-size: 10px; */
}
.main {
min-height: 100vh;
background-color: rgb(235, 239, 245);
display: flex;
align-items: center;
justify-content: center;
}
footer {
font-size: 1.6rem;
/* width: 70%; */
background-color: white;
height: auto;
padding: 3rem;
width: 105rem;
min-width: auto;
}
ul {
list-style-type: none;
}
li{
padding: .17rem;
}
.boxes {
border: 1px solid rgb(16, 79, 151);
padding: 1rem 0;
float: left;
}
.boxes__small {
width: 15%;
min-width: 10.7rem;
}
.boxes__large {
max-width: 54rem;
width: auto;
background-color: yellow;
}
.boxes__large-buttons{
width: 25rem;
min-width: auto;
background-color: rosybrown;
}
.horizontal-box{
background-color: rgb(165, 149, 180);
display: flex;
float: left;
flex-wrap: wrap;
width: 100%;
border-top: 2px solid rgb(235, 239, 245);
margin-top: 1.5rem;
padding: 2rem 0;
}
.horizontal-box__container{
border: 1px solid red;
}
.horizontal-box__container--1{
flex-grow: 1;
}
input[type=email] , .btn{
width: 100%;
outline: none !important;
border-radius: 3px;
}
input[type=email]{
border: 2px solid rgb(242, 242, 244);
padding: .5rem 1rem;
display: block;
margin: .8rem 0;
}
.btn{
text-decoration: none;
color: white;
text-align: center;
background-image: linear-gradient(to right, rgb(127,200,255), rgb(108,138,247));
padding: .7rem 1rem;
border: none;
cursor: pointer ;
}
<body>
<div class="main">
<footer>
<div class="boxes boxes__small">
<ul>
<li>
<h4>Gallery</h4>
</li>
<li>community</li>
<li>Trendy</li>
<li>Picks</li>
</ul>
</div>
<div class="boxes boxes__small">
<ul>
<li>
<h4>Marketplace</h4>
</li>
<li>Trending</li>
<li>Best Selling</li>
<li>Latest</li>
</ul>
</div>
<div class="boxes boxes__small">
<ul>
<li>
<h4>Manazine</h4>
</li>
<li>Art Skills</li>
<li>Career</li>
<li>Inspiration</li>
<li>News</li>
</ul>
</div>
<div class="boxes boxes__large">
<ul>
<li>
<h4>Newsletters</h4>
</li>
<li>
Subscribe to our newsletters to get your weekly does os news, updates, tips and special offers.
</li>
</ul>
<div class="boxes__large-buttons">
<input type="email" placeholder="Enter your email address">
<button class="btn">Subscribe</button>
</div>
</div>
<div class="horizontal-box">
<div class="horizontal-box__container horizontal-box__container--1">
Pravaci police trantion and contituenem
</div>
<div class="horizontal-box__container horizontal-box__container--2">
dispatction petionsn Instagram
</div>
</div>
</footer>
</div>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
