-
AuthorPosts
-
November 9, 2017 at 6:05 pm #874800
Dear,
I would like my footer to look someting like the example site (private content):
– Fixed background image
– Centered responsive block with transparant backgroundI 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 BelgiumNovember 11, 2017 at 10:41 pm #875605Hey 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; }
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,
MikeNovember 13, 2017 at 4:44 pm #876158Hi 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 #876471Hi Sam,
Please try this CSS out as well:
#footer .widget *{ text-align:center !important; }
Best regards,
RikardNovember 15, 2017 at 3:44 pm #877105Hi 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 #877293Hi,
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,
MikeNovember 16, 2017 at 12:29 pm #877477Hi,
The site should be visible now.
Regards,
SamNovember 17, 2017 at 2:38 pm #878073Hi,
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,
RikardNovember 18, 2017 at 4:22 pm #878584Hi,
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,
SamNovember 18, 2017 at 5:01 pm #878586Hi,
Please add this code#footer .widget { max-width: 40%; margin: auto!important; }
please see screenshot in Private Content area
Best regards,
MikeNovember 22, 2017 at 10:11 pm #880475Hi,
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 7 years, 1 month ago by sammerman04.
November 23, 2017 at 1:27 am #880557 -
AuthorPosts
- The topic ‘Sticky footer + centered content’ is closed to new replies.