• WordPress.com
  • Forums
  • Plans & Pricing
  • Log In
  • Get Started
  • WordPress Hosting
  • Domain Names
  • Website Builder
  • Create a Blog
  • Professional Email
  • Enterprise
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • Google Apps
  • WordPress.com Support
  • News
  • Website Building Tips
  • Business Name Generator
  • Logo Maker
  • Daily Webinars
  • Learn WordPress
Get Started
  • Sign Up
  • Log In
About
  • Plans & Pricing
Products
  • WordPress Hosting
  • Domain Names
  • Website Builder
  • Create a Blog
  • Professional Email
  • Enterprise
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • Google Apps
Resources
  • WordPress.com Support
  • News
  • Website Building Tips
  • Business Name Generator
  • Logo Maker
  • Daily Webinars
  • Learn WordPress

Need help? Check out our Support site, then

Premium Theme Support › Graph Paper Press › Qua

Reduce logo size for mobile devices

  • 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.

About This Topic

  • Started 4 years by huskephemera
  • In: Qua
  • This topic has 1 reply
  • 1 participant
  • Latest reply from huskephemera
  • Last activity: 4 years

Tags

  • No topic tags found.
  • logo
  • Mobile

WordPress.com

WordPress.com WordPress.com Logo

Products

  • WordPress Hosting
  • Domain Names
  • Website Builder
  • Create a Blog
  • Professional Email
  • P2: WordPress for Teams
  • Enterprise Solutions
  • Built By WordPress.com

Features

  • Overview
  • WordPress Themes
  • WordPress Plugins
  • Google Apps

Resources

  • WordPress.com Support
  • WordPress Forums
  • WordPress News
  • Website Building Tips
  • Business Name Generator
  • Logo Maker
  • Daily Webinars
  • Learn WordPress
  • Developer Resources

Company

  • About
  • Partners
  • Press
  • Terms of Service
  • Privacy Policy
  • Do Not Sell or Share My Personal Information
  • Privacy Notice for California Users

Language

Mobile Apps

  • Download on the App Store
  • Get it on Google Play

Social Media

  • WordPress.com on Twitter Twitter Icon
  • WordPress.com on Facebook Facebook Icon
  • WordPress.com on Instagram Instagram Icon
  • WordPress.com on YouTube Youtube Icon
An Automattic production
Work With Us
    • Premium Theme Support
    • Customize
    • Sign up
    • Log in
    • Copy shortlink
    • Report this content
    • Manage subscriptions