Pro Accordion not displaying correctly

[Arnebo]

Hi everyone,

I’m currently setting up my website with pro and used the accordion content piece.
My problem is that while it looks perfect in the pro editor the accordion is broken on the live site.

The problem can be seen here https://arnebornheim.com/

I have (to my best knowledge) removed custom Css attributes and also tried deactivating all plugins which didn’t result in a fix.

I would love your help on that and please let me know what further information you require!

[ruenel]

Hello @Arnebo,

Thank you for the details. I have checked your site and I could not see any HTML/JS errors that may contribute to your issue. You might just be having a caching issue. Since you have installed a caching plugin WP Super Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. Kindly let us know.

[Arnebo]

Thanks for you quick answer. I have tried clearing the cache, then deactivating the plugin. Even after a more than a day of waiting the problem remains (tested from multiple browsers)

Do you have any other idea? Should I consider uninstalling and reinstalling the theme? will this delete my existing configuration?

[thai]

Hi @Arnebo,

There is a syntax error in your custom CSS. Please find and remove this CSS:

///////* footer{margin-top:-22vh;}/////

It could be under the custom CSS section:

If you can’t find it, please provide us with your admin account so we can take a closer look.

Thank you.

[Arnebo]

Thanks Thai! I just found this myself.
The footer is breaking the accordion and with another footer configuration the accordion works as planned.

Now I have the problem that my site looks different than before.
What I wanted to do with my (not so elegant) solution is having a fullscreen background image (vh:100) with my content in the vertical center of the site and having the footer bleed over the background as well (-> no scrolling is possible on the site) also the footer should be relatively on the bottom of the site.

if you could bring me on the right track on how to do this I would be forever grateful!

[thai]

Hi @Arnebo,

The best way to do that is setting your whole footer with fixed position.

Please add the following CSS under Theme Options > CSS:

footer.x-colophon {
    position: fixed;
    width: 100%;
    bottom: 0;
}

If you want to limit the CSS for home page only, please try with this:

.home footer.x-colophon {
    position: fixed;
    width: 100%;
    bottom: 0;
}

If you want to limit on desktop screen size only, please try with this:

@media (min-width: 980px){
    footer.x-colophon {
        position: fixed;
        width: 100%;
        bottom: 0;
    }
}

Hope it helps

[Arnebo]

Thanks so much! This helped me a lot for the footer:slight_smile:
2 more questions if i may:

1)How do i get a fullscreen background image that covers the space under my footer, too? using the section background currently leaves a lot of white space.

2. What way would be best to vertically center my content on the page ?

Thanks so much!

[paul.r]

Hi @Arnebo,

1. Can you provide us the url of the page where we can see the issue. I checked your homepage but didn’t see any white spce.

To make your section full screen, you can add the code below in your section’s inline css field.

2. You can try the code on the link below

Vertical alignment 1

Hope this helps

[Arnebo]

Hi, thanks for the reply!

I want the background image to be fullscreen but also contain that footer over it.
I want it to look like this again < just with a working accordion

now with the latest settings my page looks like this however:

So I need a way of displaying the footer over the background image and containing it all in a 100vh

Sorry if my way of describing is not super clear…

[nabeel]

Hi @Arnebo,

If you need to cover the footer too then instead of assigning the background to the section, assign it to the site’s body either via Page Settings > Meta Settings:

Or add the following code in the Theme Options > CSS:

.home {
    background: url(http://arnebornheim.com/wp-content/uploads/2017/11/2017-09-25-death-valley-9276-Instagram.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

To make the site’s background color transparent on homepage so your background image gets visible, add this code as well:

.home .site, .home .x-site {
    background-color: transparent;
}

Make sure to set the footer bar’s background color to transparent, currently it is set to white, Hope this helps!

[Arnebo]

Thank you so much for your help! Now it’s working as intended
Do you guys have a tip jar?

Quick note from me:
adding “height: 100vh” was needed for me to ensure that the background always covered the whole site when rescaling

.home {
background: url(http://arnebornheim.com/wp-content/uploads/2017/11/2017-09-25-death-valley-9276-Instagram.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100vh
}

[paul.r]

You’re most welcome Arnebo!