Reduce logo size for mobile devices

Premium Theme Support › Graph Paper Press › Qua

• Author
  Posts
• September 2, 2018 at 5:36 am #134507
  huskephemera

  Member

  Hi,

  Is it possible to reduce the size my logo is displayed for mobile devices?

  I’m currently using this code to increase the size of my logo in browser display:

  img.site-logo.attachment-qua-site-logo {
  display: none;
  /* Hide customizer image logo */
  }

  a.site-logo-link {
  background-image: url(‘https://i1.wp.com/huskephemera.files.wordpress.com/2018/08/logo-to-go-white-bg-crop.png?ssl=1&w=450’);
  /* Add full-size image url copied from Media panel in /wp-admin */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  display: block;
  height: 130px;
  /* Adjust height to taste */
  width: 330px;
  /* Adjust width to taste */
  }

  /* Mobile responsive styles */
  
  @media (max-width: 480px) {
  .site-logo {
  margin: 0 auto 2em;
  height: 0;
  /* Removing height in favor of flexible padding-bottom, see next comment below */
  padding-bottom: 100%;
  /* Makes height play nice with responsive widths, adjust to taste */
  width: 100%;
  /* Adjust width to taste */
  }
  }

  Thanks!
  Mark Wojcik.

  The blog I need help with is: (visible only to logged in users)

  September 2, 2018 at 5:54 am #134508
  huskephemera

  Member

  Original poster

  Actually, I believe the more important questions would be:

  – How I can centre the logo in mobile device viewing, or,

  – How can I bring the top of the logo to meet the top of the menu in mobile viewing for nicer aesthetics.

  Mark.

• The topic ‘Reduce logo size for mobile devices’ is closed to new replies.