Archived topic
applying different padding to footer widgets
3 replies · Started by Cynthia on November 26, 2021
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.
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;
}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.
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;
}