[dangerboydesign]

When I resize my screen, the logo repositions itself but does not change size. This isn’t really a problem until we get down to phone-sized screen where the logo is too wide. Shouldn’t the logo be coded to resize itself at a certain screen width?

[Juanfra Aldasoro]

Hi,

Thanks for writing. The design is thought with a general approach. The logo isn’t resized on mobile devices because generally it shouldn’t. However, there might be cases in which logos can be bigger in size that the actual viewport. For that cases, you should apply CSS rules in order to have the logo width value in percentage, and then the logo will be resized.

Best,
Juan.

[dangerboydesign]

yeah that’s great, but i bought this theme because i don’t know all the css needed to make a site responsive. do i put something like this in the custom css?

@media screen and (max-width: 320px) {
#header #top #logo #retina-logo {
display: inline-block;
max-width: 100%;
height: auto;
}}

[Juanfra Aldasoro]

Great. Yes, try including the default logo as well for non retina devices:

@media screen and (max-width: 320px) {
   #header #top #logo #retina-logo,
   #header #top #logo #default-logo {
      display: inline-block;
      max-width: 100%;
      height: auto;
   }
}

Best,
Juan.

[dangerboydesign]

ok then logo seems to be behaving, but when i look at the site on an iphone in portrait aspect, there are two logos. ie, the logo is duplicated. why would it be doing this? it is showing both the retina and the default versions?

[Juanfra Aldasoro]

Sorry, I copied the ‘display’ property from your code. Try removing that line:

display: inline-block;

Best,
Juan.

[dangerboydesign]

great. thanks! everything seems fine now.

[Juanfra Aldasoro]

Awesome 🙂 Nice to hear that.

Have a nice day,
Juan.