Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 9, 2017 at 6:05 pm #874800
    sammerman04

    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

    November 11, 2017 at 10:41 pm #875605
    Mike

    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

    November 13, 2017 at 4:44 pm #876158
    sammerman04

    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

    November 14, 2017 at 7:22 am #876471
    Rikard

    Hi Sam,

    Please try this CSS out as well:

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

    Best regards,
    Rikard

    November 15, 2017 at 3:44 pm #877105
    sammerman04

    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!

    November 16, 2017 at 12:51 am #877293
    Mike

    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

    November 16, 2017 at 12:29 pm #877477
    sammerman04

    Hi,

    The site should be visible now.

    Regards,
    Sam

    November 17, 2017 at 2:38 pm #878073
    Rikard

    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

    November 18, 2017 at 4:22 pm #878584
    sammerman04

    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

    November 18, 2017 at 5:01 pm #878586
    Mike

    Hi,
    Please add this code

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

    please see screenshot in Private Content area

    Best regards,
    Mike

    November 22, 2017 at 10:11 pm #880475
    sammerman04

    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, 12 months ago by sammerman04.
    November 23, 2017 at 1:27 am #880557
    Mike

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

    Best regards,
    Mike

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