How to code a logo image to be responsive in theme

  • Resolved DLHershy

    (@dlhershy)


    11 years, 2 months ago

    I am using the theme Minimum by Qode. I am trying to get the logo image to be responsive. I have read that this theme developer has used javascript to setup the size of the logo for this theme. Below is the code I have tried, two iterations, one to replace the logo image according to the screen size and the second attempt was to adjust the size of one logo image (preferable). If anyone has a solution that would be appreciated. NOTE that there is no header.php file just a responsive.css file. Thank you so much….
    —————
    First Attempt – Tried to have a different logo image for each screen size: Does Not Work but in one screen size I got a double logo image.

    @media only screen and (min-width: 960px) and (max-width:1120px)
    {.logo a{height: 65px width: 462 !important; background: url ‘logo-image-path’)}}}

    @media only screen and (min-width: 500px) and (max-width: 960px)
    {.logo a{height: 55px width: 391px !important;background: url
    (‘logo-image-path’)}}}

    @media only screen and (min-width: 480px) and (max-width: 767px)
    {.logo a{height: 45px width: 320px !important;background: url(‘logo-image-path’)}}}

    @media only screen and (max-width: 500px){.logo a{height: 33px
    width: 235px !important; background: url (‘logo-image-path’)}}}

    @media only screen and (min-width: 0px) and (max-width: 479px)
    {.logo a{height: 30px width: 214px !important; background: url
    ‘logo-image-path’}}}
    ———————————————-
    Second Attempt – Code used: No double image and the image did not scale to accomodate screen sizes.

    @media only screen and (min-width: 960px) and (max-width:1120px) {.logo a{height: 65px width: 462 !important; }}

    @media only screen and (min-width: 500px) and (max-width: 960px)
    {.logo a{height: 55px width: 391px !important;}}

    @media only screen and (min-width: 480px) and (max-width: 767px) {.logo a{height: 45px width: 320px !important;}}

    @media only screen and (max-width: 500px){.logo a{height: 33px
    width: 235px !important; }}

    @media only screen and (min-width: 0px) and (max-width: 479px)
    {.logo a{height: 30px width: 214px !important;}}

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

  • Try something like:

    .logo img a {
    background: url('logo-image-path');
    background-size: contain;
    background-repeat: no-repeat;
}

    You can also give it a height attribute if needed.
    A link to the site if possible would help me refine the code.

    Thread Starter DLHershy

    (@dlhershy)

    Would this code work for all the screen sizes or does it have to be modified for each screen?

    Here is my development site link – https://dev.motechdevelopment.com

    Thank you….

    Thread Starter DLHershy

    (@dlhershy)

    I tried the above code with no success. Any other ideas?

    Thread Starter DLHershy

    (@dlhershy)

    The solution that works for this problem on my site is the following code which was provided by the theme developer Qode. Their support was excellent!

    .logo img { width: 100%; }

@media only screen and (min-width: 960px) and (max-width: 1120px) {  

.logo { width: 45%;}}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to code a logo image to be responsive in theme’ is closed to new replies.