Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 21, 2014 at 7:02 am #241038
    abedia

    Hi. I am developing this page: http://www.kitm.se/sv/
    As you see, I have a bigger image in the header than recommended default size.
    Is it possible to have another smaller image that is shown only when a mobile is used?
    Thanks
    Abedia

    March 24, 2014 at 3:06 am #241906
    Josue

    Hey Abedia!

    You’d need to edit /includes/helper-main-menu.php, try adding this after line 101:

    echo avia_logo('_YOUR_MOBILE_LOGO_URL_GOES_HERE_', $addition, 'span', true);

    Then, add this to the Quick CSS:

    @media only screen and (min-width: 768px) {
  span.logo{
  	display: none;
  }
}

@media only screen and (max-width: 767px) {
  strong.logo{
  	display: none;
  }
}

    Best regards,
    Josue

    March 24, 2014 at 6:19 pm #242229
    abedia

    Hi

    I did exactly as you suggested. I inserted the code in Quick CSS and lines 101 and 102 look like this:

    echo avia_logo(AVIA_BASE_URL.’images/layout/logo.png’, $addition, ‘strong’, true);
    echo avia_logo(‘http://www.kitm.se/logo2.jpg’, $addition, ‘span’, true);

    But I don’t see the smaller logo in my smart phone yet. It is located here: http://www.kitm.se/logo2.jpg

    Have I done something wrong?

    Regards
    Abedi

    • This reply was modified 10 years, 8 months ago by abedia.
    March 24, 2014 at 6:29 pm #242235
    Yigit

    Hi :)

    Shall we mark the thread as resolved?

    Regards,
    Yigit

    March 24, 2014 at 6:39 pm #242245
    abedia

    No, please read my previous message again. Thank!

    March 24, 2014 at 7:21 pm #242278
    Josue

    Hey!

    Change the second “echo avia_logo..” to:

    echo '<span class="logo"><a href="http://www.kitm.se/sv/"><img height="100" width="300" src="http://www.kitm.se/logo2.jpg" alt="Svenska Föreningar för Klinisk Immunologi och Transfusionsmedicin"></a></span>';

    Regards,
    Josue

    March 24, 2014 at 7:38 pm #242287
    abedia

    I see now the logo but it is stretched. I changed the size (340×156) to the default size with a new image name (logo2.jpg). Now the line looks like this:

    echo ‘<span class=”logo”>Svenska Föreningar för Klinisk Immunologi och Transfusionsmedicin</span>’;

    But the image is not shown correctly. How is in your smart phone? I use Samsung S3.

    Regards
    Abedi

    • This reply was modified 10 years, 8 months ago by abedia.
    March 24, 2014 at 7:42 pm #242288
    Josue

    Hi!

    Try adding this code too:

    span.logo{
width: 220px !important;
}

    Result:

    Best regards,
    Josue

    March 24, 2014 at 7:47 pm #242293
    abedia

    Thanks, now it works fine. Just a question: What is the best size for logo for smart phone? Is it the default size which is 340×156 or the width should be 220 as I see in the last code?

    • This reply was modified 10 years, 8 months ago by abedia.
    March 24, 2014 at 8:17 pm #242313
    Josue

    Hi!

    The smartphone width screen is usally 340 but in this case it would be better to have it smaller because of the navigation button on the right.

    Cheers!
    Josue

    March 24, 2014 at 8:18 pm #242314
    abedia

    Thanks for your excellent support!

    Regards
    Abedi

    March 24, 2014 at 8:22 pm #242317
    Josue

    You are welcome, glad we could help :)

    Regards,
    
Josue

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Smaller image in the header that is shown only when a mobile is used?’ is closed to new replies.