White Bar I Cannot Get Rid Of!?

BB Theme
1

hey guys.
http://brandaroo.wpengine.com/test-page/ (login = demo / e6e137)
this is a test page, with no content at all, yet there is a white bar. when i add rows using beaverbuilder or visual composer that bar is still there.

like here: http://brandaroo.wpengine.com/home-draft/

How do I get rid of that? thank you for the help

2

here’s what we’re trying to accomplish: http://linktrust.com/ That background image runs up under the header, not sure how to do that? (we’re just using that image as a placeholder for now)

3

Hi EngineeringRFQ,

Can you provide temp admin access, please? So we can take a closer look. As it looks like you have margin-top: 40px which is causing the space/gap.

Thanks,
Danny

4

[Content Hidden]

5

Hi EngineeringRFQ,

Can you remove all the Visual Composer shortcodes from the Text module, please? As you can not use VC and BB on the same page.

Let me know if this resolves your issue.

Thanks,
Danny

6

How do i do that? that page was built using only the beaverbuilder plugin, not visual composer, other pages use visual composer but not that one as far as i know.

7

Hi EngineeringRFQ,

Did you manage to figure this out? I no longer see the gap in http://brandaroo.wpengine.com/test-page but it’s still present in http://brandaroo.wpengine.com/home-draft which currently is built using VC, not BB. Convert that page into BB and let us know if there is still a gap and let’s work together sorting it out.

Jun

8

hey Jun, yes I figured it out with some padding adjustments, thank you guys for the help!

I still can’t figure out the background image, if you look here: http://brandaroo.wpengine.com/template-test you’ll see it looks good, however that’s using 2 identical background images, one for the main row, the other as the general theme background, in order to get that look of the image carrying up through the header.

but using 2 large images like that is causing loading delays. do you know if there’s a way to get that same look using only a single background image?

9

Hi EngineeringRFQ,

The VC shortcode I was referring to was in the Text module.

In regards to header, you will first want to remove the background image and the negative margins you have added to the text “Build A Live InMarket Audience…”. Then set the header to be transparent in Customizer > Header > Header Style.

Once the header has been set to transparent. You will need to give the .fl-page-content class a negative margin-top. For example:

.fl-page-content {
  margin-top: -130px;
}

and also give the header a position and a z-index. Something like:

.fl-page-header.fl-page-header-primary {
  position: relative;
  z-index: 99999;
}

Finally, you’re going to need to reduce the image you’re using with the people looking at tablets and phones. As that image is 12mb in size which is far too large for a web page.

Thanks,
Danny

10

worked perfectly Danny, thank you for the clear instructions! Enjoy your weekend!

11

No problem, Hi EngineeringRFQ.

Happy your issue is resolved and enjoy your weekend!

Thanks,
Danny

12

hey Danny, just one last thing, do you know how i can tweak the css so the home page looks fine on mobile? I looked at http://brandaroo.wpengine.com and while your fixes worked for desktop it looks off on an iphone.

thanks!

13

Hey EngineeringRFQ,

We can wrap Danny’s code above in a media query so it only applies to large devices like so…

@media (min-width: 768px) {
  .fl-page-content {
    margin-top: -130px;
  }
}

Can you replace Danny’s code with the one above and see if it’s what you’re looking for?

Ben