New Logo not aligned correctly on mobile responsive banner

Options
Hilary Whale
Hilary Whale ✭
Ancient Membership Photogenic First Reply
in Blackbaud Raiser's Edge NXT®: General Discussion
Hi



I am having to change our Logo on our Alumni website which displays correctly on the web, but when you look on mobiles or tablets it isn't aligned correctly with the search function and menu.



How can i correct this issue? The Logo we had before is fine!



Thanks



Hilary
Tagged:

Comments

  • Daniel Hartanto
    Daniel Hartanto ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic
    Hi Hilary,



    That could likely be the stylesheet (CSS) associated to the image.  Do feel free to share the URL of the website so we could probably help you further.



    If that's a CSS related, usually for responsive image they'll put the following CSS line -- basically that will make all type of image to have the 100% width of the container wrapping it 



    img {

        width: 100%;

        height: auto;

    }



    Take the above as general CSS rule, however there might be further need / these could be further customized per specific layout design of your website (i.e. adding CSS media queries, max-width etc) 



    Hope it helps,



    regards,

    Daniel
  • Julie Gibson
    Julie Gibson ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic
    To add onto Daniel's post, please also be sure to use a retina display logo for mobile responsiveness.



    Julie
  • Hilary Whale
    Hilary Whale ✭
    Ancient Membership Photogenic First Reply
    Hi both



    Thanks for your messages!



    Our URL is http://www.brunel.ac.uk/alumni and i will be replacing the Brunel University London Logo, so can you see what the problem could be when our new Logo is inserted on the header which causes the new image to not be aligned with the search button and menu when viewing from a mobile device?



    Thanks



    Hilary
  • Daniel Hartanto
    Daniel Hartanto ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic
    Hi Hilary,



    Thanks for the provided URL.



    I see the logo image is not the issue here, it resizes proportionally just fine as the screen shrunked.



    Thus I am assuming you might be referring to the "vertical alignment" between the logo image and search/menu buttons, let me know?



    Currently if you see the attached screengrab, there is a margin-top property of 32px attributing to the #headerRight container of which those mobile search/menu buttons is being wrapped within / reside.



    If you modify the value from the 32px to 15px, I believe it should give a better vertical alignment you desired. You can use CSS Media Queries property to target the same selector or if you have the access to the original setting of that selector, just modify the value to 15.



    In case if you don't have access to the original CSS setting, you could always overwrite that by putting inline stylesheet (make sure it's posted after the initial) as followed



    <style>

    @media screen and (max-width: 670px){

    #headerRight {

      margin-top:15px;

    }

    }

    </style>



    I choose max-width 670px because it seems that's the breakpoint where your site start transforming / rendering the mobile version from desktop version.



    Let us know.



    regards,

    Daniel



    P.s. Additionally / Unrelated, you can center the text of that "Development and Alumni Relations" instead of as it is currently indented left aligned if you want, here is the CSS snippet



    #wrapMedia .gutter {

      text-align: center;

    }

     

Categories