Footer Widgets not centered and Footer area not coloured like demo

Hi Alexandra, I’m glad you’re enjoying Sela!

The three items in my footer (widgets) are not aligned in the middle directly underneath the title. If you compare to Sela Demo website it looks like mine have moved to the left. My website is https://www.shanlysapron.com

If you’d like to center your tex widget content you can do that. For example, wrap your Contact Us text widget content in a div:

<div style="text-align: center">
Your content here
</div>

Let me know if this accomplishes what you’re after or if you need further help.

Finally, footer area in my theme is white like the colour of website body but in the demo is grey. I like to give it a bit of colour, how can I do this please?

Did you get this sorted out? I don’t see any white background in either your footer widget area or the footer credits area:

Hello,

thanks so much for your message. I will try to align the footer after work ??

for some reason the other day that ‘footer’ with instagram, contact us… looked whiter to me and Sela Demo greyish but now I see it’s the same colour… so it’s fine. But just in case, if I had to change this colour, what would you look for in style.css please?

Thanks and Kindest Regards, Alexandra

If you use a browser inspector to right-click the footer widget area, you’ll find the relevant CSS here:

.footer-widget-area {
    background-color: #fafafa;
    border-top: 1px solid #eee;
    padding: 3em 4.661% 1.5em;
}

That means you can override the background colour with something like this in your child theme:

.footer-widget-area {
    background-color: #bb00bb;
}

Hi Kathryn,

Thanks very much for your help.

I am trying this but the code you gave me doesn’t get saved. I have tried adding the div in different ways but it doesn’t work. This is what I’ve got at the moment:

<p><span style=”font-size:17px;”>Email:[email protected]
Telephone: 0785 037 2589</p>
<p>
<span style=”font-size:17px;”>Classes take place in:
Cook Manchester, 476 Chester Road, Manchester M16 9HE</span></p>

Also how can I center the Google map that I have on the left please? I think that my Instagram feed looks centered…

Thanks and Regards, A.

I’m not sure why your widget code isn’t getting saved, but if you just add some centering to what you have now, that should do it:

<p style="text-align: center"><span style="font-size:17px;">Email:[email protected]
Telephone: 0785 037 2589</p>
<p style="text-align: center"><span style="font-size:17px;">Classes take place in:
Cook Manchester, 476 Chester Road, Manchester M16 9HE</span></p>

Also how can I center the Google map that I have on the left please?

Try adding this to your child theme’s style.css:

.home .google-maps-widget {
     text-align: center;
}

It worked! Thank you ??

Great, you’re welcome!