Logo sizing on mobile view

SimonPhillpotts

I've nearly got my site as I want it and working nicely across a range of devices, but I'm struggling to find a way to increase the size of the logo on the mobile friendly view. It doesn't fill the space well and there are gaps either side and also above and below ,particularly to the menu bar. Is there a way of adjusting this without affecting the desktop/tablet view?

www.quercyphotoholidays.fr

Many thanks

Hikin' Mike

SmugMug puts a 75% width on limit on small devices. This should take care of it:

/* Resize Logo from 75% to 100% */
@media screen and (max-width: 736px) {

    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
      max-width: 100%;
    }

}

SimonPhillpotts

That's great thank you, it works perfectly. Do you know why there is excess spacing above and below the logo on small devices? Is this something that can be altered?

Hikin' Mike

@SimonPhillpotts said:
That's great thank you, it works perfectly. Do you know why there is excess spacing above and below the logo on small devices? Is this something that can be altered?

There may be a better way, but this is the only way I could think of...

/* Removes top/bottom padding/margin on the logo */
@media (max-width: 425px) {

  .sm-user-ui .sm-page-widget-logo-container a img {
    display: block;
    background-position: center top !important;
    height: 82px !important;
  }

  .sm-user-ui .sm-page-widget.sm-page-widget-logo .sm-page-widget-content {
    padding-bottom: 0 !important;
  }

}

SimonPhillpotts

Thanks so much. You are a legend. Works perfectly and I'm really pleased with how it all works now!