Logo resize on Retina only

BB Theme
1

I replied to a resolved thread earlier here: http://forum.wpbeaverbuilder.com/support/q/bb-theme-v1-2-9-to-v1-3-0-site-header-logo-size-error/

Using BB Theme 1.5 Logo resizes to a massive size on Retina using the fixed header when the “Fade In” is selected. Logo performs as expected using the shrink or fixed state.

Here’s a screencast of the fade in issue.

https://www.dropbox.com/s/47eym8vq54ken2r/logo2x.mov?dl=0

2

Hi Bobby,

Can you provide a link to your site, so we can take a closer look, please?

Thanks,
Danny

3

[Content Hidden]

4

Hi Bobby,

Thanks! We’ve tested the site on a Mac retina and we weren’t able to replicate your issue. Link to the screencast below.

https://goo.gl/k5m3Gd

Jun

5

I apologize Jun but your video absolutely proves my point.

When the webpage is at absolute top the logo has padding above and below it. Put your fingers on the left and right edge, or a ruler on your screen. It’s quite small at this point.

When you scroll the the fade in version comes into view, there’s significantly less padding which is fine but the logo is almost a full inch wider from left to right.

The attached screenshots were taken from your video, blue lines were added to show the change in scale.

https://www.dropbox.com/s/ina83q9x8n930te/IMG_5361.PNG?dl=0

Bobby

6

Not sure that dropbox link works… here it is again

https://www.dropbox.com/s/4a2vxs7e4tf64lv/Screenshot%202016-04-14%2011.27.39.png?dl=0

7

Hi Bobby,

I see what you mean. Try using this CSS code below and see if that fixes it.

.fl-page-logo-wrap {
    padding-right: 0px;
    padding-left: 0px;
}

Jun

8

Hi Jun,

Really appreciate your help!

Removing the padding didn’t help though :frowning:

9

It looks like the img tag is getting height and width properties from javascript.

https://www.dropbox.com/s/e8o7f55nk3iiott/Screenshot%202016-04-14%2013.55.15.png?dl=0

Then when we scroll down this rules comes into play

.fl-page-nav-right.fl-page-header-fixed .fl-logo-img, .fl-page-header-fixed .fl-logo-img {
  max-height: 46px !important;
    width: auto !important;
}

When I override this css rule in my custom css like this:

.fl-page-nav-right.fl-page-header-fixed .fl-logo-img, .fl-page-header-fixed .fl-logo-img {
  max-height: 28px !important;
    width: auto !important;
}

This hack works but where did the max-height: 46px !important come from?

10

Hi Bobby,

You’re right it’s the max-height and this is also present on non-retina devices but it seems that it only affects the image set for retina probably because it’s larger. This came from the BB theme.

For the time being just use that CSS code and thanks for some light into this.

Jun