Need Help Aligning My Logo Picture & Lettering On Mobile Site

sbphotographystudiosbphotographystudio Registered Users Posts: 21 Big grins

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?

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
        }
    
  • sbphotographystudiosbphotographystudio Registered Users Posts: 21 Big grins

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

Sign In or Register to comment.