[Resolved] Footer Widget Padding

[Bill]

Hey guys,
I’ve tried looking at previous topics (which are generally a huge help) but I’ve not managed to find a solution to this one so far.

On Desktop view in Footer Widget 3 (Search Bar/Social media links), I’m wanting to add padding above the search bar (20px) to push it down a little. I would prefer for Mobile to be unaffected.

On Mobile view, I’d like to reduce the padding between each Footer Widget, so I’d like to close up the gaps that are quite substantial between the three separate widgets.

Please note, I have already added three ‘Additional CSS’ codes, but they are related to centering and other padding

Thank you.

[David]

Hi there,

you can adjust the Footer Widget Area Padding separately for Desktop and Mobile in Customizer > Layout > Footer

Mobile will inherit Desktop values unless you assign them a value.

For the mobile spacing – try this CSS to reduce that:

@media (max-width: 768px) {
    .inside-footer-widgets>div:not(:last-child) {
        margin-bottom: 20px !important;
}

[Bill]

Hi David,
Thanks for your quick and helpful response.

I tried using the Customizer > Layout > Footer padding, but it was just Widget 3 that I was hoping to add a small amount of padding to the top. Doing it this way does the same for all three.

The CSS worked perfectly though, thank you!

[Bill]

I think I got it with this, David.

.footer-widget-3 {
    padding-top: 9px;
}

Would that be correct?

[Leo]

Yup that looks good!

[Bill]

Cheers, Leo! 🙂

[Bill]

Sorry guys, I’ve just noticed something.

This code:

@media (max-width: 768px) {
    .inside-footer-widgets>div:not(:last-child) {
        margin-bottom: 20px !important;
}

Seems to be conflicting with this, which I already have to display ‘Related Posts’:

.wpsp-related-posts1 {
    background-color: #fff;
		text-align: center;
    padding: 24px 20px 10px 10px;
    margin-top: 40px;
		margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: #d0edff 0 7px 28px !important;
}

On the Desktop site, it’s causing a conflict, but on Mobile it’s fine.

Thanks in advance.

Edit:
I think it’s down to this:
@media (max-width: 768px) {

I have adjusted it to ‘2188px’ and it seems to have cured it.

I also deleted ‘max-width’ entirely and didn’t notice any issues that I can see.

Please could you advise what the recommended width should be for optimal desktop/mobile viewing?

Thank you.

[Leo]

Did you make sure to close the @media bracket for this code here?

@media (max-width: 768px) {
    .inside-footer-widgets>div:not(:last-child) {
        margin-bottom: 20px !important;
}

It should be:

@media (max-width: 768px) {
    .inside-footer-widgets>div:not(:last-child) {
        margin-bottom: 20px !important;
    }
}

Otherwise all the code below that would be wrapped in @media (max-width: 768px) {

[Bill]

Thanks so much, Leo!

[Leo]

No problem 🙂

[Author]

Posts