CSS logo not responsive on mobile devices - css

Question

Hello I am new with CSS
I think I have broken the CSS on my page
the logo runs off the page on mobile devices
if anyone could point me as to why this is not responsive?
thanks
check the site here http://finddaytrips.com/dev
Paul
---------------------------css below ------------------
.logo-wrap {
background:url(images/bg-header.png) repeat-x;
min-height:89px;
position:relative;
}
.logo-wrap:before {
content:"";
display:block;
height:100%;
left:-100%;
position:absolute;
top:0;
width:100%;
}
.logo-wrap:after {
content:"";
display:block;
height:100%;
right:-100%;
position:absolute;
top:0;
width:100%;
}
.logo-wrap:before { background:url(images/bg-header.png) repeat-x; }
.logo-wrap:after { background:url(images/bg-header.png) repeat-x; }
.logo {
position:absolute;
top:15px;
left:25px;
text-align:center;
}
#media (min-width: 768px) and (max-width: 979px) {
.logo { width:100%; }
}
#media (max-width: 767px) {
.logo {
position:relative;
top:0;
margin:20px 0;
}
.logo.pull-left { float:none;
}
}
.logo a {
filter:none !important;
background-color:#393939;
background-image:-moz-linear-gradient(top,#434343,#292929);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#292929));
background-image:-webkit-linear-gradient(top,#434343,#292929);
background-image:-o-linear-gradient(top,#434343,#292929);
background-image:linear-gradient(to bottom,#434343,#292929);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff434343', endColorstr='#ff292929', GradientType=0);
display:block;
padding:14px 11px 12px 11px;
border-radius:6px 6px 0 0;
}
#media (max-width: 767px) {
.logo a { text-align:center; }
}
.logo p {
background:#8ec63f;
border-top:1px solid #fbde02;
font:italic 34px/1.1em 'Orbitron', sans-serif;
font-weight:900;
text-align:center;
padding:0 5px 5px 0;
color:#2c2c2c;
margin:0;
border-radius:0 0 6px 6px;
}
#media (min-width: 768px) and (max-width: 979px) {
.logo p { font-size:16px; }
}
.logo .logo_h__txt { text-align:center; }
.logo .logo_h__txt a { padding:5px 15px 5px 5px; }
.logo .logo_h__txt a:hover, .logo .logo_h__txt a:active {
color:#fff;
text-decoration:none;
}

Answer 1

Your image is responsive! There is other parts of your code that are affecting the logo.
Unfortunately I will add that you should improve our skills in responsive design, even after I give you these changes to fix your logo, your site is just not working at certain sizes, your site needs some serious work for virtually every phone in landscape mode. Not only are there duplicate media queries, there is also media queries in your code for 760px (as well as 767px shown in your example) which doesn't look good if re-sizing a window and not good practice in general.
To fix the logo problem,...
You do not require the pseudo elements ::before and ::after on .logo-wrap.
You need to completely remove the absolute positioning of .logo as well as top and left.
You also need to remove margin from the .logo class in the media query "max-width: 767px".
To replace this spacing I would add padding: 10px; to the class .span4 on your page (which is not listed in the code above)
I do not believe you require <div class="spacer"> either! (also not in the code above)
Good luck in your site building.

Answer 2

Just add img-responsive to your logo image class like this
<img src="logo.png" class="img-responsive">
but use bootstrap
put the links on the header and the script source on the footer
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
See reference
http://getbootstrap.com/css/#images