Background border on mobile

brlewis

I was wrong, I do have more questions this week,

I would like to have fixed background border around the center area/body on mobile displays. I tested my string on full display and it seems to work but on mobile I just get the border on the left side.

.sm-user-ui .sm-page-layout .sm-page-layout-pagetemplate {
margin: 41px !important;
padding: 0 !important;
}

@media screen and (max-width: 736px) {
.sm-user-ui .sm-page-layout .sm-page-layout-pagetemplate {
margin: 12px !important;
padding: 0 !important;
}
}

Sample page: https://www.inmylens.com/About

Phone results

Hikin' Mike

I understand what you're doing, I had a similar site years ago. I would suggest doing things a bit different.

Go to 'Customize > Content and Design'. The 'Entire Site > Layout'. Make it 'Stretchy' and edit the Section widths to suit. This is what I have:

Then select your Active Theme. Go to 'Advanced' and add the Background color (blue) and Body color (yellow).

Now remove this code:

.sm-user-ui .sm-page-layout .sm-page-layout-pagetemplate {
  margin: 41px !important;
  padding: 0 !important;
}

@media screen and (max-width: 736px) {
  .sm-user-ui .sm-page-layout .sm-page-layout-pagetemplate {
    margin: 12px !important;
    padding: 0 !important;
  }
}

Add this to your site-wide Theme's CSS Section:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {margin: 40px;}

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

  .sm-user-ui .sm-page-layout .sm-page-layout-region,
  .sm-user-ui .sm-page-layout .sm-page-layout-row,
  .sm-user-ui .sm-page-layout .sm-page-layout-row .sm-page-layout-column {width: auto !important;}

  .sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate > .sm-page-layout-region-body {margin: 40px !important;}

} 

I tested this on my site as best as I could, without "Publishing".

brlewis

As always, Thank you very much, thank works very well. I was also mixed up on the background/body colors

one more question is there CSS that will control the height of the logo/hamburger header in the mobile view? it gets taller in mobile view vs standard.

Hikin' Mike

@brlewis said:
As always, Thank you very much, thank works very well. I was also mixed up on the background/body colors

one more question is there CSS that will control the height of the logo/hamburger header in the mobile view? it gets taller in mobile view vs standard.

Yes, I spent some time this morning updating that tutorial and added this:

@media (max-width: 736px) {

    .sm-user-ui .sm-page-widget.sm-page-widget-nav .sm-page-widget-content {padding: 0 !important}

}

brlewis

yeah, much better thanks again and have a good weekend!!!

brlewis

Mike, after getting everything setup an adjusting the colors back I see my footer is not staying at the bottom of the page, I don’t think this is new.. Is there a setting to center the height with the body in the middle and the footer at the bottom of the page, or is it just is what it is :-).

This is when the browser width is narrow (not mobile) and the full height of monitor. I noticed it with 2 windows side by side.

Thank you
Brad

Hikin' Mike

I added a slideshow on my test page and I couldn't replicate what your site is doing. If you add this to your CSS, that should stick it on the bottom regardless.

.sm-user-ui .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

brlewis

Thank you very much, have a good weekend. I don't want to jinx myself but I think I am done with customizations, so thank you very much for all the help.

Brad
PS maybe we will get to meet at Merced NWR when the cranes return this year, take care.

Hikin' Mike

@brlewis said:
PS maybe we will get to meet at Merced NWR when the cranes return this year, take care.

Was thinking the same thing.