Digital experiences for all disciplines
New Landing › How can we help? › Cardinal › Responsive Logo Issues
New Landing › How can we help? › Cardinal › Responsive Logo Issues
- This topic has 18 replies, 6 voices, and was last updated 9 years by Mohammad – SUPPORT.
-
Posted in: Cardinal
-
January 16, 2015 at 4:47 pm #142103
Hey,
I’m finding some pretty serious logo issues here. I’ve entered 70 in the Logo Max Height field, yet the logo is stretching wider at each break point. The logo has the correct proportions at mobile width (tested on a Mac in Safari and Chrome)
Also, at smaller break points in Chrome, the logo breaks out of the header entirely and shows up really big! :/
Hope there’s a quick fix!
January 16, 2015 at 5:15 pm #142109Hi,
Try to fix that adding the code below to your custom css option.
#mobile-logo img { height: 70px!important; }
-Rui
January 16, 2015 at 5:21 pm #142110Thanks, that fixes the second issue on Chrome.
But, the main problem is still there. At each break point, the logo is stretched wider and wider… i.e. at the mobile width, the logo is fine. But at tablet and desktop sizes the logo stretches considerably.
Any ideas?
January 16, 2015 at 5:49 pm #142116I notice in firebug the following code:
#logo img.retina { width: 184px; }
Where did that width come from? If I disable that width property, the logo displays at the correct width. At a smaller browser width, the logo is 157.500px wide, and with the site at full width the logo displays at 184px wide. Neither of those widths are correct – they are both stretched.
January 16, 2015 at 5:50 pm #142117This reply has been marked as private.January 16, 2015 at 5:53 pm #142119Ah sorry, I should have mentioned I’m on a retina display here. I think it is working fine on a standard display, but something is strange with the retina code…
January 16, 2015 at 5:54 pm #142120This reply has been marked as private.January 19, 2015 at 10:05 am #142316Hi
Here’s your issue:
Your standard logo is 184px x 100px, yet you’ve set the max height to 70px, when it should be 100px. The max height property is only for preventing the retina logo from showing bigger.
If you change your max height to 100px is should work fine
– Kyle
January 19, 2015 at 10:12 am #142319Thanks Kyle,
That fixed it. I had assumed that changing the max height would restrict the height, keeping the logo in proportion. I now realise I should make the logo the right height in the first place.
Cheers
January 19, 2015 at 10:13 am #142321This reply has been marked as private.January 19, 2015 at 10:18 am #142324Done 🙂
February 17, 2015 at 4:20 am #150737I am having a similar issue on a retina display – the logo is stretched even though my max height is correct at 75. Any suggestions? http://ecollectivedesign.com/
February 17, 2015 at 8:01 am #150760Try adding this to your custom css:
.full-center #logo { max-width: 55%; }
– Kyle
February 22, 2015 at 6:16 am #152208Estimated kyle
in my case It’s the same, I tried your advices, but still not work for me, the logo is distorted on the tablet.
Any suggestions?February 22, 2015 at 10:52 am #152214Hi,
Can you a take a screenshot it doesn’t look distort to me. Clear the cache browser first.
-Rui
-
Posted in: Cardinal
You must be logged in and have valid license to reply to this topic.