Archived topic

Footer Widget Padding

9 replies · Started by Bill on May 28, 2020

Viewing posts 1–10 of 10

May 28, 2020 at 6:14 am #1304897

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.

May 28, 2020 at 8:10 am #1305184

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;
}

May 28, 2020 at 8:35 am #1305210

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!

May 28, 2020 at 12:34 pm #1305490

I think I got it with this, David.

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

Would that be correct?

May 28, 2020 at 1:38 pm #1305558

Yup that looks good!

May 28, 2020 at 10:21 pm #1305860

Cheers, Leo! :)

May 29, 2020 at 4:48 am #1306173

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.

May 29, 2020 at 8:09 am #1306523

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) {

May 30, 2020 at 12:16 pm #1307999

Thanks so much, Leo!

May 30, 2020 at 1:03 pm #1308057

No problem :)

This archived topic is closed to new replies.

Start building better websites today.