1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 my logo gets too small in responsive-medium mode

Discussion in 'Styling and Customization Questions' started by mfman, Nov 28, 2014.

  1. mfman

    mfman Member

    I would really appreciate some input on a problem I'm having.

    So, in order to make sure I had a very sharp looking logo, I output my logo as a PNG from Adobe Illustrator at 771x130. However, I make it display at 41% of that size to get the proportions I'm going for on the site. At responsive-wide, everything looks great. I made this one change in the header.css template as you can see below in #logo:

        @property "header";
        background-color: @contentBackground;
        @property "/header";
    {xen:helper clearfix, '#header .pageWidth .pageContent'}
            display: block;
            float: left;
            line-height: {xen:calc '@headerLogoHeight - 4'}px;
            *line-height: @headerLogoHeight;
            height: @headerLogoHeight;
            max-width: 41%;
            vertical-align: middle;
            /* IE6/7 vertical align fix */
            #logo span
                *display: inline-block;
                *height: 100%;
            #logo a:hover
                text-decoration: none;
            #logo img
                vertical-align: middle;
                max-width: 100%;
    The problem is that when I reduce the size of the browser window, moving the right side of the browser to the right (while retaining the height) toward responsive-medium, the logo shrinks very quickly to an extremely small unacceptable size. Why is this happening? Is there a way to still use my 771x130 logo but display it at a smaller size in order to retain its sharpness, and have it look the size I want as I move from responsive-wide to responsive-medium? When I upload a regular size logo, it just looks too blurry and fuzzy on my Mac, iPad, and iPhone.

    By the way, I do have the Respollo add-on installed with a mobile logo for responsive-narrow, and it works great, although I'm not able to upload a mobile logo double the size and have it display smaller...not sure why that is.

    I had a thought. Is it possible, and is it a favorable solution, to move the whole header area out of the responsive area in the PAGE_CONTAINER template?
    Last edited: Nov 28, 2014

Share This Page