Question

Photo of Brad Kemp

0

How to Resize Logo for Mobile Only

4

Can anyone shed some light on how I would make our logo smaller than what it is on mobile view only?

The logo size is perfect on a desktop, but the logo is just a bit too big when viewing on a phone.

I have the logo set to 100% in the Header Text section. I believe the logo I uploaded is 279 x 90
Site is: hopeoflebanon.com

Thanks

Brad

  • Photo of DJ Grick

    0

    Set your image to be responsive

    <img class="img-responsive imgpad" src="/Content/ExternalSite/header-logo.png" alt="header-logo.png"  style="width: 100%;">

  • Photo of Brad Kemp

    0

    Hi DJ, 

    I tried your solution, but on the mobile, the logo is still real big. Did I miss something?

    Thanks for any help.

  • Photo of Brad Kemp

    0

    Thanks....that sorta did what I was hoping. It brought the image size down some on my phone and kept the original size on the desktop view. Do you know if there's a way to make it smaller only on a phone? I'm hoping to make it a little smaller than what's displaying on my andriod phone.

    Thanks again.

  • Photo of Brad Kemp

    0

    Finally got it to work with the following:

    <div class="resizelogo">  <img src="/Content/ExternalSite/header-logo.png" class="desktop">
    <img src="/Content/ExternalSite/mobile-header-logo.png" class="mobile" />  </div>

      /* hide mobile version by default */
    .resizelogo .mobile {   
    display: none; 
    } 

    /* when screen is less than 600px wide  show mobile version and hide desktop */ 
    @media (max-width: 600px) {
    .resizelogo .mobile {     
    display: block;   
    }
    .resizelogo .desktop {     
    display: none;   
     }  }