Home page 'too busy' on mobile devices.

net1994 · January 20, 2019

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:

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?
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

Hikin' Mike · January 20, 2019

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' Mike · January 20, 2019

Oh, put this in your THEME'S CUSTOM CSS SECTION.

net1994 · January 20, 2019

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.

Hikin' Mike · January 20, 2019

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);}

}

net1994 · January 20, 2019

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.

Hikin' Mike · January 20, 2019

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;}

}

net1994 · January 20, 2019

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!!

Hikin' Mike · 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;}

}

net1994 · January 21, 2019

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

Hikin' Mike · January 21, 2019

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;}

}

net1994 · January 21, 2019

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.

Hikin' Mike · January 21, 2019

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

net1994 · January 21, 2019

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

Hikin' Mike · 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;}

}

net1994 · January 21, 2019

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?

Hikin' Mike · January 21, 2019

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);}

net1994 · January 21, 2019

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

Home page 'too busy' on mobile devices.

Comments