0
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./dist/style.css">
</head>

<body>
    <header class="toolbar">
        <div class="icons">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
                <path d="M32 4c-8.837 0-16.836 3.582-22.627 9.374l-9.373-9.374v24h24l-8.971-8.97c4.344-4.343 10.343-7.030 16.971-7.030 13.254 0 24 10.745 24 24 0 7.169-3.143 13.602-8.126 18l5.292 6c6.644-5.864 10.834-14.442 10.834-24 0-17.673-14.327-32-32-32z" fill="#000000"></path>
            </svg>|
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64">
                <path d="M47.199 4c-6.727 0-12.516 5.472-15.198 11.188-2.684-5.715-8.474-11.188-15.201-11.188-9.274 0-16.8 7.527-16.8 16.802 0 18.865 19.031 23.812 32.001 42.464 12.26-18.536 31.999-24.2 31.999-42.464 0-9.274-7.527-16.802-16.801-16.802z" fill="#000000"></path>
            </svg>
         </div>   

        <div>
            <h6>Juan Estrada<span>Photography</span></h6>

            <nav class="menu">
                <a href="#">About</a>
                <a href="#">Work</a>
                <a href="#">Contact</a>
            </nav>
            <h1>LandScape</h1>
        </div>
    </header>
    <div class="holder">
        <div class="container">

            <div class="title">


            </div>
        <div class="content">

            <div id="item">
                <img src="http://2.bp.blogspot.com/-aEmJ1o-tyKc/VM-HSrCWLHI/AAAAAAAAaqc/ABoeOqyY37A/s1600/Ferrari-LaFerrari-1.jpg">
                <h3>Ferrari Laferrari</h3>
            </div>
        </div>

        <div class="aside">
            <ul class="info">
                <li><h4><i class="icon icon camera">Canon Powershot S95</h4></li>
                <li>22.5 MM</li>
                <li>f/5.6</li>
                <li>1/1000</li>
                <li>80</li>
            </ul>             
        </div>

    </div>


<div class="container2">

            <div class="title">


            </div>
        <div class="content2">

            <div id="item2">
                <img src="http://2.bp.blogspot.com/-aEmJ1o-tyKc/VM-HSrCWLHI/AAAAAAAAaqc/ABoeOqyY37A/s1600/Ferrari-LaFerrari-1.jpg">
                <h3>Ferrari Laferrari</h3>
            </div>
        </div>

        <div class="aside2">
            <ul class="info2">
                <li><h4>Canon Powershot S95</h4></li>
                <li>22.5 MM</li>
                <li>f/5.6</li>
                <li>1/1000</li>
                <li>80</li>
            </ul>             
        </div>

    </div>


</div>
</body>

</html>

css

*{
    box-sizing:border-box;
}

body{
    background-color: rgb(36, 36, 25);
}

header{
    width: 80%;
    margin: auto;
}
h1{
    background-color: orange; 
    text-align: center;
    display: block;
}
h6{
    display: block;
    background-color: red;
}
.toolbar{
    background-color: white;
    display: inline-block;

}

.icons{
    background-color: blue;
    display: inline-block;
}

.menu{
    display: inline-block;
}
a{

    background-color: orange;
    display: inline-block;
}
img{
    display: inline-block;
    width: 100%; 
    -webkit-filter:grayscale(100%);
    filter: grayscale(100%);    
}
img:hover{
    transition:.5s;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

}
nav{
    display: inline-block;

}

/*.title{
    background-color: yellow;
    background-image: url(https://webdevbuddy.files.wordpress.com/2012/06/boy-cartoon.png);
    margin: auto;
    border-radius: 50%;

}*/

.holder{
    height: 100%;
    width: 100%;
}
.container{
    display: inline-block;
    background-color: blue ;
    max-width:80%;
    height: 100%;
    margin: auto;



}
.content{
    display:inline-block;
    width: 40%;
    min-width: 600px;
    background-color: yellow;

}

.aside{
    display: inline-block;
    background-color: green;
    min-width: 200px;
    position: absolute;
    position-top: 0;


}   
.info{
    background-color: grey;

}

.container2{

    background-color: red ;
    max-width:80%;
    height: 100%;
    margin: auto;



}
.content2{
    display:inline-block;
    width: 40%;
    min-width: 600px;
    height:50%;
    background-color: yellow;

}

.aside2{
    display: inline-block;
    background-color: green;
    min-width: 200px;
    height:50%;
    position: absolute;
    position-top: 0;

}   
.info2{
    background-color: grey;

}
4
Contributors
4
Replies
33
Views
2 Years
Discussion Span
Last Post by advent_geek
0

i would like the info on the right of the image to drop below it when the screen is resized. also for it to push the next div down

1

It would be a lot easier if you gave us a url so we can see what is happening and play with it there, without having to create our own copy of your page.

Votes + Comments
second that
0

try to use style="width:100% !important" on inside the imag tag.

it will resize the width of the image according to the media port

Kind Regards

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.