Mobile Margins & Padding White Space

cherryfivers

I have built a custom pre-footer and footer on my website (http://cherryfivers.smugmug.com). When viewed on a desktop or tablet browser larger than 670px wide, the pre-footer (light grey, contains my social icons) and footer (black, contains my copyright tag) show properly edge-to-edge and with zero padding between them (no white space).

When viewed on a mobile browser at less than 670px, there is a 12px border around all widgets, including the social icon container which acts as my pre-footer and the footer space itself. Thus, there is white space all around the page, as well as double white space between the footer and pre-footer.

I have tried solving this problem with:

@media screen and (max-width: 670px) {
.sm-page-widget-WIDGET_ID .sm-page-widget-content {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
}

... but I have been unsuccessful in finding the right WIDGET_IDs to affect these areas, making me wonder if I'm actually not on the right track at all with this approach.

Any help is great appreciated! Thanks!

Hikin' Mike

Try this:

.sm-user-ui .sm-page-widget-16603443 .sm-page-widget-content,
.sm-user-ui .sm-page-widget-16599995 .sm-page-widget-content {
	margin: 0 !important;
	}

cherryfivers

Solved!
Yes, thank you! That worked perfectly!

I added a "padding: 0 !important;" line as well in order to clear out the space between those two containers.

Thanks for the help!