Мобильная версияя просто хочу, чтобы высота контейнера увеличивалась, чтобы вместить все его содержимое, чтобы нижний колонтитул оставался под ним и не перекрывался, не было полос прокрутки или скрытого содержимого. я просмотрел массу ответов и попробовал все, но я сделал что-то конкретное, я только начал изучать это, поэтому не знаю, что не так, может кто-нибудь помочь?
это во всех браузерах
это во всех браузерах p>
основной+нижний колонтитул
STORE CO.
Shop for electronics.
About Us
On a budget?
See our discounted items.
About Us
Membership
Billing
Contact Us
- Terms & Conditions
- Privacy Policy
- Copyright
и CSS
html, body{
margin:0;
padding:0px;
}
a{
text-decoration: none;
}
body{
color: #222;
font-size:18px;
background-color: rgb(200, 200, 200);
font-family:"Lato", sans-serif;
background-color: white;
display:flex;
flex-direction: column;
}
#home-page-header{
background-color: #ccc;
}
main{
}
footer{
background-color: white;
padding-right: 4%;
padding-left: 4%;
padding-bottom:100px;
bottom:0;
margin-top:auto;
}
footer a{
font-weight:bold;
color:#222;
}
footer a:hover{
opacity:0.75;
}
footer i{
font-size:25px;
}
footer #logo-f{
margin-bottom:20px;
}
.footer-top .row{
gap:20px;
}
.footer-top .row .col{
margin-bottom:10px;
}
footer hr{
border-style: dotted none none;
border-width: 3px;
border-color: #8f8f8f;
margin-top:40px;
margin-bottom:40px;
}
.footer-bottom{
display:flex;
font-weight:normal;
font-size:16px;
justify-content: space-between;
}
.footer-bottom li{
display:inline-block;
list-style-type: none;
margin-right:25px;
}
/*top of page*/
.top-txt{
margin:0;
padding-bottom:4%;
}
.top-txt h2{
margin:0;
text-align: center;
font-size:2vw;
}
/*hero image*/
#hero-section{
background-color:#ccc;
padding-bottom: 4%;
}
.page-title{
margin:0;
text-align:center;
font-size:8vw;
padding-top:5%;
padding-bottom:1%
}
#hero-section img{
width:75%;
display:block;
margin:auto;
border-radius:10px;
}
/*main blocks*/
.main-content{
margin-left:3%;
margin-right:3%;
padding-top:5%;
padding-bottom:5%;
}
.main-grid{
display: grid;
align-items: center;
grid-gap:5%;
}
#home-grid{
grid-template-areas:
"bsb"
"cta1"
"cate"
"ib1"
"cta2"
"ib2"
"rvb"
"cta3";
}
/*bs*/
#bs-block{
grid-area:bsb;
}
#bs-block h1{
text-align:center;
font-size: 4vw;
}
#bestseller-imgs img{
width:96%;
border-radius:10px;
display:block;
align-items: center;
margin:auto;
transition: all 0.2s ease;
}
#bestseller-imgs p{
padding-left:5%;
color: #222;
font-size:25px;
font-weight:bold;
text-decoration: underline 1px;
text-underline-offset:10px;
}
#bestseller-imgs img:hover{
filter: brightness(70%)
}
#bestseller-imgs p:hover{
text-decoration: underline 2px;
}
/*categories*/
#cate-block{
grid-area:cate
}
#cate-block h1{
font-size:4vw;
}
.cate-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
list-style:none;
padding:0;
}
.cate-img{
width:100%;
border-radius: 10px;
transition: all 500ms ease;
}
.category{
position:relative;
padding-bottom:20px;
}
.cate-img-desc{
position: absolute;
bottom: 8%;
left: 6%;
color: #fff;
visibility: hidden;
opacity: 0;
font-size:2vw;
font-weight:bold;
transition: all 500ms ease;
}
.category:hover .cate-img-desc{
visibility: visible;
opacity: 1;
}
.cate-img:hover{
filter: brightness(70%)
}
/*cta blocks*/
#cta-block-1{
grid-area:cta1
}
#cta-block-2{
grid-area:cta2;
}
#cta-block-3{
grid-area:cta3;
}
.cta-block{
font-size:2vw;
text-align:center;
border-top:1px solid #222;
border-bottom:1px solid #222;
}
/*info blocks*/
.info-row{
padding-top:5%;
padding-bottom: 5%;
gap:3%;
}
.info-row img{
width:100%;
border-radius:10px;
display:block;
margin:auto;
}
.info-text{
text-align:center;
display:flex;
flex-direction: column;
align-items: center;
font-size:1.5vw;
margin:auto;
}
#info-block-1{
grid-area: ib1;
}
#info-block-2{
grid-area:ib2;
}
/*review block*/
#review-block{
grid-area:rvb;
}
#review-block .row{
gap:20px;
}
#review-text{
margin:auto;
}
#rvw-img img{
width:80%;
border-radius:10px;
display:block;
margin:auto;
margin-bottom:50px;
}
#rvw-txt{
display:flex;
border:1px solid #222;
text-align: center;
align-items: center;
margin-top:50px;
}
#rvw-txt h2{
padding-left:10%;
padding-right:10%;
font-size:3vw;
}
/*default*/
.row{
display:flex;
}
.row-rev{
display: flex;
flex-direction: row-reverse;
}
.col{
flex:1;
}
.cta-btn{
color:#222;
border:1px #222 solid;
border-radius:7px;
background-color: white;
padding: 0.6em 1.2em 0.6em 1.2em;
font-size:2vw;
transition: all 300ms ease;
cursor:pointer;
}
.cta-btn:hover{
background-color:#222;
color:white;
}
.border-block{ /*a block has a top and bottom line border*/
border-top:1px solid #222;
border-bottom:1px solid #222;
}
Подробнее здесь: https://stackoverflow.com/questions/791 ... l-contents
