Home page 'too busy' on mobile devices.

net1994net1994 Major grinsPosts: 260Registered Users Major grins
edited January 20, 2019 in SmugMug Customization

Hello all. I added a logo to my site, on the navbar. However now it's taking up about half of the home page on mobile devices. See below. When I just had text where the new logo is, it showed a lot more of the homepage photo. Now the dark area around the logo overlays the home page image too much. Questions:

  1. Is there a way, without removing the logo, to get rid of the dark area around the logo that takes up half of the screen? CSS code or a setting to change on my site?
  2. Is it possible to remove the footer text (copyright info) from the bottom of the page only on mobile devices, but leave it for my website on desktops? If not, I suppose I could delete the footer from the whole site and then try and put it at the bottom of the navibar. I'd rather not if possible. If I need to do this, could I remove the footer just on the home page but have it visible for all other parts of the site, pages and galleries?

Thanks!

f

Candy For Your Eyes @ Paint By Pixels

http://www.paintbypixels.com

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins

    The copyright info is technically not in your footer. Not a big deal, but if you remove that text block (.sm-page-widget-24134150) with something else, you'll have to re-do code. This will remove the dark background a remove the copyright info on devices 736px or smaller.

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-widget-24134150 {display: none}
    
    } 
    
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins
  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    Thanks Mike! The CSS did some of what I need. Though now when I click on the menu button on mobile, the links drop down and the text color (light gray) is hard/impossible to see when on-top of some photos in the slide show. See below. Is there a way when the menu button is pressed, the menu can again use the gray shadow of the menu so one can see the links? Also the text of 'Menu' is too light and is also hard to see on the button.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins

    I forgot about that menu (I don't own a mobile). Use this instead...

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-widget-24134150 {display: none}
    
      .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}
    
    } 
    
  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    That helped make the text of the drop down readable, thanks! Though the text for 'Menu' is too dark before you touch it and it drops down. Is there any way to make the text a bit more brighter? Yes, I am a PITA.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins

    Try this instead:

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-widget-24134150 {display: none}
    
      .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}
    
      .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}
    
    }
    
  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    That did it! Thanks so much!

    Can you think of anything to exclude my footer from the homepage on mobile devices, but leave it on all other pages on mobile?
    Thanks Mike!!

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins
    edited January 20, 2019

    @net1994 said:
    That did it! Thanks so much!

    Can you think of anything to exclude my footer from the homepage on mobile devices, but leave it on all other pages on mobile?
    Thanks Mike!!

    You must have changed the copyright text block to a block in the footer section. You need to change .sm-page-widget-24134150 to this .sm-page-home .sm-page-layout-region-footer...

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-home .sm-page-layout-region-footer {display: none}
    
      .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}
    
      .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}
    
    }
    
  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    @Hikin' Mike said:

    @net1994 said:
    That did it! Thanks so much!

    Can you think of anything to exclude my footer from the homepage on mobile devices, but leave it on all other pages on mobile?
    Thanks Mike!!

    You must have changed the copyright text block to a block in the footer section. You need to change .sm-page-widget-24134150 to this .sm-page-home .sm-page-layout-region-footer...

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-home .sm-page-layout-region-footer {display: none}
    
      .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}
    
      .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}
    
    }
    

    Hi Mike - I added this in and it still shows the footer text at the bottom of the mobile homepage. Any other thoughts?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins

    Sorry , I didn't test it, just assumed it would work. This works:

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {display: none}
    
      .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}
    
      .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}
    
    }
    
  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    Hi Mike - For some reason, that's not doing it with the above. I double checked to make sure a bracket wasn't missing, and none were.

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins

    I see you're not adding that to your theme's custom CSS section like I mentioned earlier.

  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    I go into Customize>Content & Theme. Then I select entire site and enter the code here:

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins
    edited January 21, 2019

    May need the !important too.

    @media only screen and ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background: transparent;}
    
      .sm-page-home .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {display: none !important;}
    
      .sm-page-widget-nav-mobile {background-color: rgba(44,46,49, 0.85);}
    
      .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {color: #fff; font-weight:bold;}
    
    }
    
  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    Ahh, now the text footer is how I want it on mobile.. Sorry, I thought any/all CSS code is just on the home page in the CSS block. I didn't even know there was a theme customization.

    However after updating the code in the right spot, now the nav bar has lost the gray background where the links are. Is there anyway to get that back?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,160Registered Users Major grins

    Looks like you somehow removed this in your theme's custom CSS section. Just add this again.

    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {background-color: rgba(44,46,49, 0.85);}

  • net1994net1994 Major grins Posts: 260Registered Users Major grins

    Thanks again! That did it. You have the patience of a saint!!

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
Sign In or Register to comment.