Archived topic
What is difference between .footer-widgets-container and .inside-footer-widgets
3 replies · Started by Khanh Nguyen on August 29, 2018
Hi,
I am trying to customize my footer widgets. I did it by using "Additional CSS".
To easily distinguish them, I added some border, blue for .inside-footer-widgets and green for .footer-widgets-container.
And I see that it seems they are the same element. You can see through this link: https://www.thomaykhoua.com/2018/08/23/hello-world/
Could you please explain it to me?
Thank you.
Hi there,
the .footer-widgets-container is the parent container and primary defines the width which matches the container width set in the customiser.
the .inside-footer-widgets sits inside the above and is the wrap used to hold the widgets. This controls the layout of the widgets depending on the device size.
Hi,
So .inside-footer-widgets looks like it's a bit out of place. It's left to .footer-widgets-container . I check the source code of Generate Press so I saw the content below:
.site-footer .footer-widgets-container .inside-footer-widgets {
margin-left: -40px;
}
I think it's a bit strange. Maybe 40px would be more reasonable.
Hi there,
Each of the widgets has 40px of Left Hand padding. This is to create the column gaps between them. That -40px left margin is used to offset the first columns padding. Without it the widgets would sit 40px off-center.
