[Support request] applying different padding to footer widgets

[Cynthia]

I would like to move Footer Widget 3 to the left or apply padding/margin to the right side of it, without effecting the other footer widgets. It is an image in footer widget 3 and I had to apply this css just to get the image to enlarge:

.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail{
max-width:140%;
}

but then it impedes into footer widget 4.

Also I can’t figure out how to get rid of the small padding/margin below the image (footer widget 3). I would like the bottom of the girl in the image to be flush with the top of the footer bar.

[David]

Hi there,

remove that CSS and try this instead:

.inside-footer-widgets .footer-widget-3 {
    flex: 2 1 0;
}

This will allow that 3rd widget to occupy 2x the amount of space that the other widgets do.
You can adjust the 2 value eg – this will 1.5x the size of the others.

.inside-footer-widgets .footer-widget-3 {
    flex: 1.5 1 0;
}

[Cynthia]

Thank you David, that seems like it works well.

So also, I wanted the bottom of the image to be flush with the top part of the footer bar. I moved it over to widget 4. Can you see the small space at the bottom. It’s like 10px of space. I can’t figure out what element is causing that unwanted padding/margin.

[Ying]

So also, I wanted the bottom of the image to be flush with the top part of the footer bar

Try this CSS:

.footer-widget-4 .siteorigin-widget-tinymce.textwidget p {
    line-height: 0;
}

[Author]

Posts