I want my header h1 to resize automatically with the browser size which is inline with an image so that it won't take most of the screen size when viewed in smalls screen and will leave some space for the image. Also please do take care of header h3 i.e it should also take up required space.
Code :
You can find the code on jsfiddle here
<body>
<div id="main_wrapper">
<header>
<div id="header_title">
<h1>Lorem Ipsum dolor sit amet facilisis ut </h1>
<h3>"Vivamus sed libero nec mauris pulvinar facilisis ut non sem."</h3>
</div>
<aside id="header_photo">
<img src="http://3.bp.blogspot.com/-hSDYcX9cd5w/UZnDC0Z27PI/AAAAAAAAAGg/WmWDp_cZfw4/s1600/lorem-ipsum-dolor-sit-amet-5.png" alt="Placeholder" class="floatingimage" title="Placeholder" />
</aside>
</header>
</div>
</body>
body {
background-size: 120%;
font-family: 'MyFont', Arial, sans-serif;
color: #181818;
}
#main_wrapper {
width: 80%;
margin: auto;
}
header {
width: 100%;
height: auto;
margin: 0;
padding: 0 0 40%;
}
#header_title {
text-align: center;
max-width: 78%;
}
#header_photo {
/*display: none;*/
margin: 0;
padding: 0;
max-width: 20%;
height: auto;
float: right;
}
.floatingimage {
position: relative;
display: none;
}
.wh100 {
width: 100px;
height: 100px;
}
@media all and (max-width:1024px) {
#main_wrapper {
width: auto;
margin: none;
}
#header_title,
#header_photo img {
margin: 0;
padding: 0;
display: inline!important;
vertical-align: middle!important;
}
#header_title {
max-width: 78%;
position: relative;
float: left;
}
#header_photo {
margin-top: 4%;
max-width: 20%;
position: relative;
float: right;
}
#header_photo img {
position: relative;
max-width: 100%;
height: auto;
}
}
NOTE: I'm using Firefox 53.0.3(32-bit)
