Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Logo
- This topic has 1 reply, 2 voices, and was last updated 8 years, 4 months ago by mikemueller.
-
AuthorPosts
-
December 4, 2015 at 1:19 pm #172772carasmoParticipant
FB page question re responsive logo on:
http://www.dermatologyandlasergroup.com/
Answer:1. Remove the embedded CSS that follows:
.site-header { background: url(http://areweconnected.com/demo2/wp-content/uploads/2015/11/transparent-logo-360x164.png) no-repeat !important; } @media only screen and (max-width: 768px){ #header{ background-image:none!important; background-color:#ffffff !important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://www.dermatologyandlasergroup.com/wp-content/uploads/2015/11/transparent-logo-360x164.png)no-repeat center !important;background-size:contain!important;width:100%!important;height:164px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 480px){ #header{ background-image:none!important; background-color:#ffffff !important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://www.dermatologyandlasergroup.com/wp-content/uploads/2015/11/transparent-logo-360x164.png)no-repeat center !important;background-size:contain!important;width:100%!important;height:164px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 320px){ #header{ background-image:none!important; background-color:#ffffff !important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://www.dermatologyandlasergroup.com/wp-content/uploads/2015/12/transparent-logo-320.png)no-repeat center !important;background-size:contain!important;width:100%!important;height:137px!important; } #title, #title a { background: none !important; } }@media only screen and (max-width: 240px){ #header{ background-image:none!important; background-color:#ffffff !important; height:auto!important;min-height:0!important;width:100%; } #title-area{ background:url(http://www.dermatologyandlasergroup.com/wp-content/uploads/2015/12/transparent-logo-240.png)no-repeat center !important;background-size:contain!important;width:100%!important;height:103px!important; } #title, #title a { background: none !important; } }
WHY: The first puts the logo behind the
.site-header
not the.site-header .site-title a
, the second set of CSS uses IDs not on your site and the syntax is wrong too.At the end of your style.css file, add this:
.header-image .site-header .site-title a { background: url('http://areweconnected.com/demo2/wp-content/uploads/2015/11/transparent-logo-360x164.png') no-repeat center center; background-size: contain; width: 100%; min-height: 200px; } @media (max-width:1024px) { .site-header { float: none!important; margin: 0 auto; display: block!important; } .site-header .site-title { min-height: none; margin: 0; } .header-image .site-header .site-title a { max-width: 500px; display: block; margin: 0 auto; min-height: 100px; max-height: 200px; padding-top:20%; height: 0px!important; float: none!important; } }
Also, view your work on larger viewports, your slider image in the widget does not center.
Fix it with this:
.slider-wide > .wrap > .widget img { display: block; margin-left: auto; margin-right: auto; }
December 4, 2015 at 5:40 pm #172782mikemuellerParticipantThis is so strange. AreWeConnected.com is where the site was migrated from but I can't find anywhere (in the style sheet or the addon sheet via JetPack) that it mentions
.site-header { background: url(http://areweconnected.com/demo2/wp-content/uploads/2015/11/transparent-logo-360x164.png) no-repeat !important; }
I don't have an "@import url" either happening.
Any ideas on where that's coming from?
-
AuthorPosts
- The topic ‘Responsive Logo’ is closed to new replies.