Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #874800

    Dear,

    I would like my footer to look someting like the example site (private content):
    – Fixed background image
    – Centered responsive block with transparant background

    I could not find a solution for this so worked around it using a content-section as footer and adding it to all my pages. However, this is not very practical (a lot of work + applying custom css to f.e. “.avia-builder-el-10” changes when I add a new block).

    How do I make this happen?

    If possible, I have a second question. I want to add a transparant background to my menu items, just like the example (private contact) I’ve Photoshopped. This background should not be shown on the menu when scrolled down. I’ve tried many options custom css but none seem to work..

    Thank you in advance!
    Sam from Belgium

    #875605

    Hey sammerman04,
    Try making your footer 1 column wide and use visual height to set the footer height and the widget width, like this:

    #footer {
        padding-top: 45vh!important; 
        height: 100vh!important; 
    }
    #text-2 {
        width: 25vw !important; 
        margin-left: 30vw !important; 
    }

    2017-11-11_153734
    You can then add a background image to the footer and a background-color for the widget with opacity set to 0.5 to make it look transparent.
    I tried going to your site but it seems down right now.

    Best regards,
    Mike

    #876158

    Hi Mike,

    Thank you for your response. My site should be visible now.

    I’ve added your code, but the footer background does not have to fill the whole screen. Also, the text was not centered on mobile.

    I now have added the following css:

    #footer .widget{
    background-color:rgba(255, 255, 255, 0.5);
    text-align: center;
    padding-top:50px;
    padding-bottom:50px;
    padding-left:80px;
    padding-right:80px;
    float: left;
    }

    This solves my problem exept for one thing: the footer widget should be centered at all times. What code should I add / adjust?

    Thank you in advance!

    Regards, Sam

    #876471

    Hi Sam,

    Please try this CSS out as well:

    #footer .widget *{
      text-align:center !important;
    }

    Best regards,
    Rikard

    #877105

    Hi Rikard,

    Thank you for your help.

    Unfortunately this did not have any effect as you wil see on the site. The code looks like this now:

    #footer .widget {
    background-color:rgba(255, 255, 255, 0.5);
    text-align: center;
    padding-top:50px;
    padding-bottom:50px;
    padding-left:80px;
    padding-right:80px;
    text-align:center !important;
    }

    #footer .widget *{
    text-align:center !important;
    }

    Any other suggestions?

    Thank you in advance!

    #877293

    Hi,
    I tried to review your site to give a better answer, but I still get a blank screen, are you blocking US IP addresses?

    Best regards,
    Mike

    #877477

    Hi,

    The site should be visible now.

    Regards,
    Sam

    #878073

    Hi,

    Thanks for that, I can see your site and I can see that everything is centered in the footer. I’m guessing you managed to get it working?

    Best regards,
    Rikard

    #878584

    Hi,

    Not really, the content is indeed centered but the transparent white background is not. It covers the full with now, while it should also be centered.

    I can’t figure out how to do this..

    Thanks,
    Sam

    #878586

    Hi,
    Please add this code

    #footer .widget {
        max-width: 40%;
        margin: auto!important; 
    }

    please see screenshot in Private Content area

    Best regards,
    Mike

    #880475

    Hi,

    This did solve my problem for desktop. I adjusted the width for other screen sizes via @media css, all is good now!

    Thanks!
    Sam

    • This reply was modified 6 years, 4 months ago by sammerman04.
    #880557

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Sticky footer + centered content’ is closed to new replies.