Mobile formatting

Allen

This folder page is set to stretchy with 10px R/L margin.
Both the html widget and Folder widget are set to 100% width with 0 L/R margins.
page: http://www.photosbyat.com/Birds/2017-Birding

But the html box is wonkie on mobile. Margins don't seem to work.
Background does not cover entire box either.

Another issue. I had to use this CSS to reduce huge space and position the MENU vertically under the banner. It kinda worked but didn't seem right.
/* remove space under banner except homepage */
@media only screen and (max-width: 460px) {
.sm-page-parentnode-zsB4B .sm-page-widget-12536016 {
margin-bottom: -60px !important;
height: 50px !important;
}
}

Teach

Hey Allen,

Try changing the 460 to 640 since 460 is smaller than the screen resolution of most phones.

@media only screen and (max-width: 460px) {

Allen

@Teach said:
Hey Allen,

Try changing the 460 to 640 since 460 is smaller than the screen resolution of most phones.

@media only screen and (max-width: 460px) {

Notice no difference.

Allen

Figured out the year page above getting the border and background to behave.

Allen

Notice the blank widget complete with border and background above to gallery box?
That is an empty folder widget. The problem is it shows on mobile.
I think the default created folder page has these boxes on it whether used or not.

I have most of my folders as "Just this folder" so I can delete it if not used.
I don't think it should be taking space on mobile and should be fixed.

Edit: I just opened a folder page that's still "all folders" and only has the galleries box used.
The empty folder widget shows on mobile. I can not remove that empty widget as it would
apply to the whole site for all folders.