Need Help Aligning My Logo Picture & Lettering On Mobile Site

sbphotographystudio

Hey Everybody!

It’s Friday! I’m just doing some minor tweaking and ran into an issue on my mobile site. I was wondering if anyone knows how to align the logo title with the logo picture?

If you look on my mobile site, the logo picture is fine, but the company title is lower tan the logo picture. I want it to be leveled. Is that possible?

Hikin' Mike

You have some duplicate code, so start by deleting this:

@media only screen and (max-width: 800px) {

    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left, 
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
        text-align: left;
        }

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
        visibility: hidden;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
        font-family: 'SmugMug Icon Font Regular';
        font-size: 48px;
        width: 48px;
        line-height: 24px;
        content: '\E039 ';
        display: block;
        visibility: visible;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background: none;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
        position: absolute;
        top: -65px;/* adjust for your logo */
        right: 10px;
        z-index: 1;
        }

  .sm-page-widget-18934456 .sm-page-widget-content .sm-page-widget-logo .sm-page-widget-logo-align-left .sm-page-widget-logo .sm-page-widget-logo-align-right .sm-page-widget-logo .sm-page-widget-logo-align-center {
    text-align: left;
    display: block;
  }
}

@media only screen and (min-width: 900px) {

    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left, 
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
    .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
        text-align: left;
        }

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
        visibility: hidden;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
        font-family: 'SmugMug Icon Font Regular';
        font-size: 48px;
        width: 48px;
        line-height: 24px;
        content: '\E039 ';
        display: block;
        visibility: visible;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background: none;
        }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
        position: absolute;
        top: -65px;/* adjust for your logo */
        right: 10px;
        z-index: 1;
        }

  .sm-page-widget-18934456 .sm-page-widget-content .sm-page-widget-logo .sm-page-widget-logo-align-left .sm-page-widget-logo .sm-page-widget-logo-align-right .sm-page-widget-logo .sm-page-widget-logo-align-center {
    text-align: left;
    display: block;
  }
}   

Use this instead:

/**
* Hamburger Menu for Mobile Devices
****************************************************************/
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left, 
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
    text-align: left;
    }

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
    visibility: hidden;
    }   

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
    font-family: 'SmugMug Icon Font Regular';
    font-size: 48px;
    width: 48px;
    line-height: 24px;
    content: '\E039 ';
    display: block;
    visibility: visible;
    }   

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
    background: none;
    }   

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
    position: absolute;
    top: -65px;/* adjust for your logo */
    right: 10px;
    z-index: 1;
    }

.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 {
    float: left;
    }

.sm-user-ui .sm-page-widget-logo-text-container {
    margin: 10px 0;
    }

sbphotographystudio

@Hikin' Mike Thank you so much! That definitely solved my problem! Sorry I took long to respond back. I really appreciate your help.