What's going on with my mobile site?

tomlewisphotogprahy

Hi, I need a bit of help here, getting great results on 13" screen and 21.5" screen in terms of how my logo and company name looks but something's going on with the mobile portrait mode, is there a way of changing this? Since I added the logo it all went messed up.

I wouldn't mind if it shows:

Tom Lewis
Photography

In that format as I know screen space is limited on phones but right know it's not usable as you will see:

www.tomlewisphotography.co.uk
Password: tomlewis888

Support has passed it onto the customisation team which could take a couple of days, hence my post here. Support did say it could be something to do with the custom css.

I am not a coder in any way so please no serious technical answers because I won't understand ;)

Landscape view is brilliant on mobile but I know most people don't really use their phones like that, I need it to look at least acceptable ;)

Thanks again,

Tom Lewis

Hikin' Mike

Not sure where to start. Looks like you are using the "Adding a Hamburger Menu for Mobile in SmugMug" that I wrote. First, the code you used to create the Hamburger Menu is duplicated and some is missing. Please remove it and put it in your Theme's Custom CSS Section. If you don'y know how follow the instructions here: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

Second, I suggest you create a different logo to include your icon AND your name.

Once you've done those, it should work better.

tomlewisphotogprahy

Mike, Appreciate you taking a look. I've deleted all css code blocks, il start again! I copied and pasted all the css code from this link given to me by smugmug for the hamburger:

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu

I really wouldn't know if it was missing but I trust you know what you're talking about.

I'm trying to create a logo which combines both logo and title as it was already suggested to me by support, the problem is when I upload it the size is all wrong and I may end up with just a few letters out of the full title.

I have no idea what im doing wrong but im guessing it's something to do with sizing. Is there another way to input the combined logo/title other than uploading to a gallery?

I'm following the link you sent me now.

thanks

Hikin' Mike

As long as you logo isn't larger than about 700px wide, you should have no issues. Make sure there is NO empty space around it. I can move it using CSS once you've done that.

tomlewisphotogprahy

thanks for the info, I get onto it

Hikin' Mike

@tomlewisphotogprahy said:
Mike, Appreciate you taking a look. I've deleted all css code blocks, il start again! I copied and pasted all the css code from this link given to me by smugmug for the hamburger:

https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Hamburger-Menu

That was me.

tomlewisphotogprahy

didn't even notice! Sorry about that, I copied and pasted everything from the first block of code.

tomlewisphotogprahy

Hi Mike, Having problems with the logo now, i've uploaded one 700px wide but the resolution is off. Again i've hit my limitations, back to the drawing board. Also im thinking i've not done it quite correctly anyway.

thanks for your help

Tom

Hikin' Mike

@tomlewisphotogprahy said:
Hi Mike, Having problems with the logo now, i've uploaded one 700px wide but the resolution is off. Again i've hit my limitations, back to the drawing board. Also im thinking i've not done it quite correctly anyway.

thanks for your help

Tom

I'll be here when you figure it out.

tomlewisphotogprahy

Hi Mike, It took me a while but my logo is now part of the header, could you move it into place please?

Thanks,
Tom

Hikin' Mike

@tomlewisphotogprahy said:
Hi Mike, It took me a while but my logo is now part of the header, could you move it into place please?

Thanks,
Tom

I can't see it. Your logo has to be public.

tomlewisphotogprahy

Ok try now

Hikin' Mike

I see it now, but you included "extra space". I cropped it, so you can use this if you'd like.

tomlewisphotogprahy

Do you mean the space around the logo?

Hikin' Mike

@tomlewisphotogprahy said:
Do you mean the space around the logo?

Yes. The one I attached removes all of the extra empty space top/bottom and left/right.

tomlewisphotogprahy

Brilliant, thank you

tomlewisphotogprahy

Works perfectly. Now i understand why you said NO space around the logo.

thanks,
Tom

Hikin' Mike

@tomlewisphotogprahy said:
Works perfectly. Now i understand why you said NO space around the logo.

thanks,
Tom

No problem!

tomlewisphotogprahy

One more thing, works great on mobile portrait now but overlaps onto the links slightly in landscape mode, do I have to resize offline?

Hikin' Mike

@tomlewisphotogprahy said:
One more thing, works great on mobile portrait now but overlaps onto the links slightly in landscape mode, do I have to resize offline?

Saw that. I'm working on a fix with CSS.

tomlewisphotogprahy

Can't wait to pay you guys!!!

Hikin' Mike

Just add this under your custom hamburger menu code:

/* Centers Logo/Menu for Screens 1030px or smaller */
@media screen and (max-width: 1030px) {

  .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 {
    display: block!important;
    width: 100%!important;
    letter-spacing: normal!important;
    word-spacing: normal!important;
    float: none!important;
  }

  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left[data-text-img-position=above],
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left[data-text-img-position=below] {align-items: center;}

  .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-right,
  .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-right {text-align: center;}

}

tomlewisphotogprahy

Beautiful, one last thing then i'll leave you alone! Can I have the social icons at the bottom of the page in mobile portrait mode?

Hikin' Mike

@tomlewisphotogprahy said:
Beautiful, one last thing then i'll leave you alone! Can I have the social icons at the bottom of the page in mobile portrait mode?

Just add this UNDER this line you just added a few minutes ago .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-right {text-align: center;}

  .sm-user-ui .sm-page-layout-region-footer {
    position: fixed;
    bottom: 0;
  }

tomlewisphotogprahy

thanks, the only problem is they are permanently there even over images when viewing galleries, is there away to make them disappear like on web when scrolling? It was doing it correctly before that last piece of code was added

Hikin' Mike

Yikes! Looks like you'll only need your social stuff pinned to the bottom on your home page, so just remove this:

  .sm-user-ui .sm-page-layout-region-footer {
    position: fixed;
    bottom: 0;
  }

Add it after the last }:

/* Pins Social to the Bottom */
@media screen and (max-width: 736px) {

  .sm-user-ui.sm-page-home .sm-page-layout-region-footer {
    position: fixed;
    bottom: 0;
  }

}

So it should look like this:

/* Centers Logo/Menu for Screens 1030px or smaller */
@media screen and (max-width: 1030px) {

  .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 {
    display: block!important;
    width: 100%!important;
    letter-spacing: normal!important;
    word-spacing: normal!important;
    float: none!important;
  }

  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left[data-text-img-position=above],
  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left[data-text-img-position=below] {align-items: center;}

  .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-right,
  .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-right {text-align: center;}

}

/* Pins Social to the Bottom */
@media screen and (max-width: 736px) {

  .sm-user-ui.sm-page-home .sm-page-layout-region-footer {
    position: fixed;
    bottom: 0;
  }

}

tomlewisphotogprahy

Brilliant stuff! Exactly how I want it, really appreciate all this Mike, now I can go to bed

Hikin' Mike

@tomlewisphotogprahy said:
Brilliant stuff! Exactly how I want it, really appreciate all this Mike, now I can go to bed

Good timing. I'm watching a show on TV now!

tomlewisphotogprahy

Nice! It's 4am here but I don't have work till 11am so I can catch up

thanks again, enjoy your show!

Hikin' Mike

@tomlewisphotogprahy said:
Nice! It's 4am here but I don't have work till 11am so I can catch up

thanks again, enjoy your show!

You're welcome! My wife was just looking up what time it is "over there". It's 8pm here.

tomlewisphotogprahy

I have one more thing to do and thats order business cards which I just finished designing, then il sleep sound!