Code: Select all
.imageset.site_logo {
background-image: url("./images/site_logo.png");
padding-left: 566px;
padding-top: 60px;
}
@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
.imageset.site_logo {
background-image: url("./images/site_logo_med.png");
padding-left: 460px;
padding-top: 49px;
}
}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
.imageset.site_logo {
background-image: url("./images/site_logo_small.png");
padding-left: 320px;
padding-top: 34px;
}
.logo {
display: inline-block !important;
}
}
The white space down the right side of your view is probably the width of your image.TooTall1 wrote:I am encountering one issue... my logo's all load correctly at the correct resolutions... however, for some reason when viewing my site on my mobile, there now appears to be a white space margin down the right hand side of the page...
I did not have to use that with the header modifications I use, now posted on the first post.proskier wrote:Figured it out... the reason it wasn't working is because your instructions omit 1 step for responsive.css (switching .logo from none to inline-block):Code: Select all
.logo { /* change display value to inline-block to show logo */ display: inline-block; /* display: none; */ float: none; padding: 10px; }