Wide logo / Mobile

Permalink Browser Info Environment
Hi,

I have a logo that, when at 200px high, the width is 995px. Whilst this is fine in the desktop view, on mobile it squeezes the width but maintains the height, therefore distorting the logo. Is there a way to constrain the size of the logo in mobile view so that it doesn't become distorted for wider images?

Cheers!

Type: Discussion
Status: In Progress
baysmedia
View Replies:
shahroq replied on at Permalink Reply
shahroq
Hi,
995px width seems too much for logo. In any case, it would not fit into the mobile screen. It should be either cropped or distorted.
baysmedia replied on at Permalink Reply 2 Attachments
baysmedia
Ironically your sticky navigation bar resizes it correctly after scroll, it's only on the initial page load it's an issue. See attached.

Is there no way the theme can render the the image and maintain the correct proportions on page load like it already does for sticky? It seems like it's already doing it on sticky (so 995px seems supportable)...

Thanks
shahroq replied on at Permalink Reply
shahroq
Could you please provide me a live link?
baysmedia replied on at Permalink Reply
baysmedia
I've PM'd you the URL. Cheers
shahroq replied on at Permalink Reply
shahroq
Hi,
Adding these code to 'custom.dev.less' should almost solve your problem:
@media (max-width: 991px) {
header:not(.responsive-sticky-header) #logo img {
    height: 60px;
    margin-top: 20px;
}
}
baysmedia replied on at Permalink Reply
baysmedia
That works. Brilliant, it's much appreciated.
76West replied on at Permalink Reply
76West
Thanks for posting this here! Helped with config on my site, too.

concrete5 Environment Information

N/A

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.