Hi Everyone,
I cannot figure out why my logo is not responsive while my other image on the page is responsive. Please check the link to see this in action. The link There is a large image on the page which resizes as the screen resizes. But the logo stays the same. How can I make the logo responsive as well… ? Please help… thank you in advance.
Here is my HTML and CSS…
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="author" content="by RT.">
<meta name="Copyright" content="Copyright © 2014 rt.com">
<link type="image/x-icon" href="/root//favicon.ico" rel="icon">
<title>Image-Page</title>
<meta name="keywords" content="47545457">
<meta name="description" content="4574575">
<link rel="stylesheet" type="text/css" href="/root/theme/site/css/styles.css">
<script type="text/javascript" src="/root/theme/site/js/jquery-2.1.4.min.js">
</script>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
font-size:10;
color:#8d643d;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
.clearfix:after, .container:after { content: ''; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; clear: both; }
.clearfix, .container { zoom: 1; clear:both; }
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
html {
min-height: 100%;
position:relative;
}
img{
max-width:100%;
height:auto;
}
a {
text-decoration:none;
}
a:visited {
padding:0 2% 0 2%;
text-decoration:none;
}
a:hover,a:focus {
text-decoration:none;
color:#fff;
}
a,input {
outline-color:invert;
outline-style:none;
outline-width:medium;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/*--[if lt IE 8]--*/
/* For IE < 8 (trigger hasLayout) */
.clearfix {
zoom:1;
}
body {
background-color: #030200;
background-image: url(/root/theme/site/img/1.jpg);
background-position: center top;
background-repeat: no-repeat;
margin: 0 auto;
font:100%/1.5em Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
height: 100%;
-webkit-overflow-scrolling: touch;
text-align:center;
}
.container{
overflow: hidden;
height: 100%;
max-width: 100%;
margin:0 auto;
text-align: left;
}
.footer{
margin: 0 auto;
text-align:center;
clear:both;
position: absolute;
bottom: 0;
width: 100%;
}
/* NAV */
.nav {
width:100%;
text-align :right;
padding-right:30px;
list-style:none;
position:relative;
z-index:10;
top:10px;
left:20px;
margin:0 0 0 0;
}
.nav li {
position:relative;
display:inline-block;
padding : 1px;
border-radius : 4px;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.nav li {
padding:0px 0px;
text-decoration:none;
color:#8d643d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
text-align:left;
}
/*********** NAV-END ***********/
/* Large Image Page */
.limagePage{
height:100%;
margin:0 1rem 0 15rem;
}
.limage {
width:100%;
height:auto;
position:relative;
}
.link{
position:relative;
left:0;
text-align:left;
}
.des{
position:relative;
left:0;
text-align:left;
}
.llink{
position:relative;
left:0;
}
.prev{position:relative;text-align:left;}
.next{float:right; }
.tbody-lrgimg {
margin:0 auto;
max-width:80em;
height:auto;
clear: both;
}
.tbody-lrgimg img{
width:100%;
height:auto;
}
.logo {
position:absolute;
margin:1rem;
}
.logo img {
max-width:100% !important;
height:auto;
display:block;
}
/* ***** Media Queries ***** */
@media only screen and (min-width:901px){
.equal-width:nth-child(4n+1) {
clear: both;
}
}
@media only screen and (min-width:400px) and (max-width:1100px){
.equal-width:nth-child(2n+1) {
clear: both;
}
}
@media only screen and (min-width:751px) and (max-width:879px){
.equal-width {width:32%; display : inline-block;}
}
@media only screen and (min-width:600px) and (max-width:750px){
.equal-width {width:40%; display : inline-block;}
}
@media only screen and (min-width:500px) and (max-width:599px){
.equal-width {width:40%; display : inline-block;}
}
@media only screen and (min-width:400px) and (max-width:499px){
.equal-width {width:45%; display : inline-block;}
}
@media only screen and (max-width:399px){
body{width:100%;}
.equal-width {width:100%;}
.equal-width img {width:100%;}
.equal-width-search {
width:100%;
float : left;
}
.equal-width:nth-child(2n+1) {
clear: both;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo"><img src="/rt.png" alt="logo"></div><a href="/root/"></a>
<ul class="nav">
<li><a href="/root/">HOME</a></li>
<li>| <a href="/root/photos">MY GALLERIES</a></li>
<li>| <a href="/root/search">SEARCH</a></li>
<li>| <a href="/root/about-me">ABOUT ME</a></li>
</ul>
</header>
<div class="limagePage">
<div class="limage">
<div class="tbody-lrgimg">
<div class="llink">
<a href="/root/photos">Albums</a> <span class="arrow">>></span><a href=
"/root/photos/love">Love</a>
</div>
<div id="prevnext">
<span class="prev"><a href="/root/photo/45745745734">PREVIOUS</a></span>
<span class="next"><a href="/root/photo/754745745">NEXT</a></span>
</div>
<div class="image" id="imagetouch">
<div class="tbody-lrgimg">
<div class="tr-lrgimg">
<img src="/Cascades-and-mountains.jpg" alt="Cascades-and-mountains">
<div class="caption">
Cascades
</div>
<div class="excerpt">
A beautiful place in Colorado.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div id="seeker">
<form action="/root/photos/search" id="PhotoViewForm" method="get"
accept-charset="utf-8">
<input name="search" id="search" value="" type="text"><input type="submit" id=
"find" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2014 rt.com</p>
</div>
</div>
</body>
</html>
