Logo suddenly resized when viewed on a smaller browser

[ryan123]

Hi,

First off, I love the new theme. I worked with Cardinal on a project over the summer and it’s been a favourite ever since. It’s great to now have a new toy.

So, on to my question.

I only have one problem with the theme and it’s that when I resize my browser, or use a device that is below a certain size, the logo jumps up in size (drastically). I’ve included two photos and a video to demonstrate this. Please let me know what you think!

Cheers,
RR

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Have you added some custom css to make the logo overlap the header like in the first screenshot?

– Kyle

[ryan123]

Hi Kyle,

I have not added any css to make the logo overlap. The only css I have added is a white boarder around the headed, like in the second photo. I have tried disabling all custom css to see if this resolves the issue, but it has not.

Any help would be much appreciate. The project is nearing launch, and this is the last issue to resolve.

Thanks!

[laranz – SUPPORT]

Hi,

Can you pass us the website link to check the issue directly in the browser rather than screenshots, so that we can investigate it further.

Let us know,

Thanks,
laranz.

[ryan123]

This reply has been marked as private.

[Kyle – SUPPORT]

For me it shows the same on desktop (see screenshot)

If the logo is overlapping that’s because you haven’t added the image sizes in the logo options

– Kyle

[Kyle – SUPPORT]

For me it shows the same on desktop (see screenshot)

If the logo is overlapping that’s because you haven’t added the image sizes in the logo options

– Kyle

Attachments:

You must be logged in to view attached files.

[ryan123]

Hi Kyle,

I have set a logo size so I don’t think that’s the issue.

I am not exactly sure what you mean when you say “For me it shows the same on desktop (see screenshot)”. That is what my site looked like in my second (originally sent) screenshots.

The issue arrises when I view the site on a device with a small screen. See http://www.responsinator.com/?url=whoisryanrich.com for more examples.

Thanks again!
Ryan

[Kyle – SUPPORT]

Please provide me with a login so I can check it

– Kyle

[ryan123]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this to your custom css:

#mobile-logo img {
  max-height: 80px;
}

– Kyle

[ryan123]

That fixed the issue.

Thank you very much!
Ryan

[Kyle – SUPPORT]

Great, no problem

– Kyle