auto resize

stefanmz · June 1, 2021

I am trying to do responsive design. I am using css3 flexbox and other height margin and other stuff instructions I was wondering how do I make my aside panels resize proportionally with the page while staying the same height? My main panel does but not my aside if I set the height to auto they become too small.

<!DOCTYPE html>

<html>

<head>
    <title>Flowers Home</title>
    <link href="styles/styles-02.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>
                <a href="#">
                    <img src="images/flower-logo.png" alt="logo"/>
                    <span>Flowers's Home</span>
                </a>
            </h1>
            <nav>
                <ul>
                    <li>
                        <a href="#">Orchids</a>
                    </li>
                    <li>
                        <a href="#">Roses</a>
                    </li>
                    <li>
                        <a href="#">Daisies</a>
                    </li>
                    <li>
                        <a href="#">Sunflowers</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside class="left">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/social_twitter_box.png" alt="logo"/>
                            <span>Tweet about us</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/social_facebook.png" alt="logo" />
                            <span>Follow us on Facebook</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/social_google.png" alt="logo" />
                            <span>Join us on Google Plus</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/social_linkedin.png" alt="logo" />
                            <span>Join us on LinkedIn</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/social_myspace.png" alt="logo" />
                            <span>Follow us on Myspace</span>
                        </a>
                    </li>
                </ul>
            </aside>
        <aside class="right">
            <ul>
                <li>
                    <p>This aside might be full of advertisments etc. This aside might be full of advertisments etc. This aside might be full of advertisments etc. This aside might be full of advertisments etc. This aside might be full of advertisments etc. </p>
                </li>
            </ul>
        </aside>
        <section>
            <article>
                <header>
                    <h1>Soo many orchids...</h1>
                </header>
                <div>
                    <img src="images/orchid01.jpg" alt="orchid01">
                    <img src="images/orchid02.jpg" alt="orchid02">
                    <img src="images/orchid03.jpg" alt="orchid03">
                    <img src="images/orchid04.jpg" alt="orchid04">
                    <img src="images/orchid05.jpg" alt="orchid05">
                    <img src="images/orchid06.jpg" alt="orchid06">
                    <img src="images/orchid07.jpg" alt="orchid07">
                    <img src="images/orchid08.jpg" alt="orchid08">
                </div>
            </article>
        </section>
        <footer>
            <h2>
                Software University - <a href="http://softuni.bg" target="_blank">softuni.bg</a>
            </h2>
        </footer>
    </div>
</body>

</html>

*{
    margin:0;
    padding:0;
}
body {
    background: url(../images/background-flowers.jpg);
    font-size: 16px;
    font-family: Tahoma;
}

nav ul li:nth-of-type(1),nav ul li:nth-of-type(2),nav ul li:nth-of-type(3) {
    padding-left: 7%;
    padding-right: 7%;
}
nav ul{
    padding-left:7.1%
}

nav li a {
    color: white;
    text-decoration: none;
    font-size: 1em;
}

h1 a {
    font-size: 1em;
    color: black;
    text-decoration: none;
    /* text-indent: 5%; */
    /* margin-top: 5%; */
}



div#wrapper>header {
    background: rgba(254,227,229,80%);
    border: 2px solid black;
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    /* margin-top: 0.2%; */
}



nav {
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* width: 39%; */
    /* float: right; */
    margin-left: 30%;
    /* position: relative; */
    /* left: 63%; */
}

div#wrapper>header h1 {
    text-align: right;
    margin-right: 1%;
    margin-top: 1.6%;
    margin-bottom: 2%;
    /* font-size: 1em; */
}

header img {
    width: 25.5%;
    float: left;
    margin-left: 1%;
    /* position: relative; */
    bottom: 0.3em;
}

nav ul li:nth-of-type(4) {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

nav ul li {
    display: inline-block;
    background: rgba(235,42,123,255);
    padding-top: 1.3%;
    padding-bottom: 1.5%;
    border: 1.5px solid black;
    margin-bottom: 4%;
}



aside.left ul {
    line-height: 1.7;
}

aside.left ul li {
    margin-bottom: -5%;
}
aside.left {
    background: rgba(254,227,229,80%);
    width: 9%;
    margin-left: 22.5%;
    /* margin-right: auto; */
    height: 17.5em;
    /* padding-top: 0%; */
    border: 2px solid black;
    padding-left: 0.7%;
    padding-right: 0.6%;
    position: absolute;
}

aside.left a {
    color: black;
    text-decoration: none;
    font-size: 0.9em;
}

ul {
    list-style-type: none;
}

aside.left img {
    position: relative;
    top: 0.8em;
    /* margin-bottom: -4%; */
    width: 22%;
}

aside.left ul li:nth-of-type(2) {
    margin-bottom: -12%;
}

aside.left ul li:nth-of-type(3) {
    margin-bottom: -12%;
}

aside.left ul li:nth-of-type(4) {
    margin-bottom: -12%;
}

section {
    border: 2.39px solid black;
    width: 31.9%;
    margin-left: 33.65%;
    /* margin-right: auto; */
    height: 14.6em;
    position: absolute;
    padding-left: 0.5%;
    padding-right: 0.5%;
    background: rgba(254,227,229,80%);
}

article div img {
    width: 23%;
    margin-left: 1%;
}

section,aside.left,aside.right {
    display: inline-block;
}

p {
    width: inherit;
    padding-left: 3%;
}

aside.right {
    width: 9%;
    float: right;
    border: 2.3px solid black;
    padding-top: 1.657%;
    padding-bottom: 2.3%;
    padding-left: 0.45%;
    padding-right: 0.5%;
    margin-right: 22.37%;
    font-size: 0.86em;
    height: 15.88em;
    background: rgba(254,227,229,80%);
}


section article header h1 {
    margin-top: 3%;
    /* margin-bottom: 2%; */
    font-size: 1.55em;
    margin-left: 1%;
}
footer {
    margin-top: 21.4%;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 2.3px solid black;
    padding: 1%;
    font-size: 0.8em;
    text-align: center;
    padding-left: 3.6%;
    padding-right: 1.1%;
    background: rgba(254,227,229,80%);
}

footer a {
    color: black;
    font-size: 1em;
}



@media(max-width: 960px){
    #wrapper{
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
    }
    div#wrapper>header{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        width: 99.5vw;
        margin-bottom: 0;
    }
    aside.left{
        display: flex;
        width: 15%;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: stretch;
        align-items: baseline;
        /* position: absolute; */
        /* right: 10%; */
        margin: 0;
        margin-top: -5.5%;
        height: 21.6em;
        padding-left: 1.5%;
        padding-top: 1%;
        padding-right: 1%;
    }
    section{
         display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        margin-top: -5.5%;
        width: 61.1%;
        height: auto;
        /* margin-right: 0px; */
        margin-left: 18.9%;
        flex-direction: column;
        padding-bottom: 1.5%;
    }
    aside.right{
            display: flex;
        width: 14%;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: stretch;
        justify-content: space-evenly;
        align-items: baseline;
        /* position: absolute; */
        right: 0%;
        /* margin-top: 41%; */
        padding-top: 4.657%;
        padding-bottom: 7.3%;
        padding-left: 1.45%;
        padding-right: 1.5%;
        margin-right: 0;
        height: 18.8em;
        margin-top: 4%;
        margin-left: 82.5%;
    }
    footer{
        
    }
    nav ul{
        width: 100%;
        padding: 0;
        /* display: inline-block; */
        display: flex;
        justify-content: flex-end;
        margin-left: -1.4%;
    }
    nav{
        width: 100%;
    }
    aside.left ul li {
        margin-bottom: -14% !important;
    }
    article div{
         display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        align-content: flex-start;
        margin-left: -3.5%;
        margin-right: -0.9%;
        flex-wrap: wrap;
    }
    article div img{
       width: 25.34%;
        margin-left: 5%;
        margin-right: 2.636%;
        margin-bottom: 1%;
    }
    header h1{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-right: 1.4% !important;
    }
    h1 img {
        position: absolute;
        top: 2%;
        left: 1%;
    }   
    nav ul li{
        margin-right: 1.4%;
    }
    aside ul li a{
        font-size: 0.98em !important;
    }
    article header h1 {
      display: block;
    }
    aside ul{

    }

}

I am looking to do it in the media max 960 px section I haven't worked on the others yet.