Scaling Logo for Mobile Site

  • Hi,
    I’m using the responsive Edin theme. On my desktop site, my site logo is 120px x 65px, as I only want it small, but on the mobile version of my site the site logo appears bigger and because it is aligned to the left, looks really silly. I’ve trawled through forums trying to amend coding etc, but have had no luck so far.
    Any advice on how to scale down the logo to fit the mobile site?

Viewing 3 replies - 1 through 3 (of 3 total)

  • If you are unable to do it from theme options,here is a quick fix:

    Just write a media query @media screen and (max-width:….) and redefine the logo size in your child theme style.css

    use !important with your new size so that it takes precedence over theme settings.

    Thread Starter Navy Frame

    (@navy-frame)

    I’m not sure which coding relates to my site logo. I have tried adding:
    @media screen and (max-width: 600px) {
    and then different versions of what I have read on other forums to my CSS Style Editor Sheet which comes with Jetpack, but nothing seems to work.

    Should the number be a size in px or should it be a %?

    Please see below for the coding under the section called Responsive on my actual theme stylesheet (and starts with @media screen…) Any advice would be much appreciated:

    }
    .site-logo-link,
    .site-title {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 60px;
    }
    .site-logo-link + .site-title {
    margin-top: -20px;
    min-height: 0;
    }
    .site-description {
    margin-top: -20px;
    margin-bottom: 30px;
    }
    .site-logo {
    margin: 0;
    max-height: 120px;
    }
    .site-description,
    .site-title {
    text-align: left;
    }
    .widget-area:before {
    margin-top: -32px;

    Thread Starter Navy Frame

    (@navy-frame)

    Hi,
    Don’t worry, I have solved it!! Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Scaling Logo for Mobile Site’ is closed to new replies.

Tags