Background border on mobile

brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    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".

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    @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}
    
    }
    
  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

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

  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    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%;
    }
    
  • brlewisbrlewis californiaRegistered Users Posts: 36 Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,941 Major grins

    @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.

Sign In or Register to comment.