Adding full-width footer in Shapely?

Shapely
#1

Is it possible to add a full-width footer to the Shapely theme that can be used together with the standard four footer widget areas?

I see that I can add a separate footer under Customise-Footer but I can’t see a way to make that area full-width - is this possible via CSS?

Background: I am trying to recreate the footer areas in my current website www.quietspacecoaching.co.uk (currently using the Karuna theme), which has a separate full-width footer widget alongside four separate footer areas. I would like to be able to display images in the full-width footer.

Any help or alternative suggestions would be much appreciated.

#2

Hey there

Try this css code:

@media screen and (min-width: 768px)
 .footer-widgets-wrapper{
 max-width: none;
}
}

Let me know if it worked :slight_smile:

#3

Hi Noda, thank you for this. I’ve popped it in but it isn’t doing anything, probably because of the way I currently have things set up. Could you explain what the CSS is intended to do?

#4

Sorry about that, yes, it will not work because it has typo error in the code, please try this one:

@media screen and (min-width: 768px){
.footer-widgets-wrapper{
max-width: none;
}
}

#5

Apologies but this isn’t doing what I’m hoping! Can you take a look at the current site at http://quietspacecoaching820088832.wpcomstaging.com/ - what I am trying to achieve is something similar to how the footers work at https://quietspacecoaching.co.uk/ whereby I have one full-width footer and then additional footer widgets at the bottom. Is this possible in Shapely?

#6

Ok I have been experimenting with this more and have taken out one of my footer areas for now and have amended to include just one text widget together with the following CSS:
@media (min-width: 768px){
.footer-widget-area .footer-widget:nth-child(1) {
width: 100%;
}
}

Seems to work but haven’t tested it for mobile etc…

#7

Hi there

Ok, if you need any assistance just let me know, I see you are good at css :slight_smile:

#8

No, I found the code somewhere else and it worked, I am good at Googling :laughing:

#9

Cool, nice to hear, let me know if you need anything else :slight_smile:

#10

Thank you! Happy for this to be closed now. I have more questions but I will open new tickets for each of those.

#11

Case closed, thanks, and have a nice weekend

#12