Responsive Logo How To?

I was wondering if anyone knew where or how I can add this attribute to the site logo? I need it to be responsive and right now it is not. It breaks off the template on a mobile device.

style="max-width: 100%;

 

 

I know already in /templates/mytemplate/_sub_header.html contains the following code:

<div class="sys_main_logo" style="min-width:__main_div_width__;">
        <div class="sys_ml" style="width:__main_div_width__;">
            <div class="sys_ml_wrapper bx-def-padding-sec">
                <bx_injection:injection_logo_before />
                __main_logo__
                <bx_injection:injection_logo_after />
            </div>
        </div>

 

The logo is injected there but I can not or do not know how to add the attribute to an injection.  The attribute is typically in an < img ="http://someURL" style="max-width: 100%;> type of implementation.  Any help?  Thanks a ton.

 

Quote · 23 May 2014

Dolphin already assigns a class called mainLogo to the logos img tag. However dolphin does not use it. There is no mainLogo section in any of dolphins css file.

So all you need to do is add this to general.css

.mainLogo {
    max-width: 100%;
}

Then clear dolphins cache.

https://www.deanbassett.com
Quote · 23 May 2014

 

Dolphin already assigns a class called mainLogo to the logos img tag. However dolphin does not use it. There is no mainLogo section in any of dolphins css file.

So all you need to do is add this to general.css

.mainLogo {
    max-width: 100%;
}

Then clear dolphins cache.

 

I don't have that in my .css.  It goes like this and I have tried putting that attribute in everywhere in it with no success.

 

/*--- Logo Section ---*/

div.sys_main_logo {
    position: relative;
    z-index: 101;

    min-height: 100px;

    border-bottom: 1px solid rgb(204,204,204);
    border-bottom: 1px solid rgba(192,192,192, 0.7);
    background-color: rgb(240,240,240);
    background-color: rgba(255,255,255, 0.6);
}
div.sys_ml {
    margin: 0px auto;

    position:relative;
  
}
div.sys_ml_wrapper {
    position: relative;
    text-align: left;
}
div.sys_main_logo .mainLogoText {
    line-height:40px;       
    font-weight:bold;
    text-decoration:none;
    letter-spacing:2px;
    text-shadow: 0px 1px 0px #ddd, 0px 2px 0px #aaa, 0px 1px 3px rgba(0, 17, 53, 0.9);
}

Quote · 23 May 2014

 re

 I don't have that in my .css. 

 I think that's why he said to add it

My opinions expressed on this site, in no way represent those of Boonex or Boonex employees.
Quote · 23 May 2014

 

 re

 I don't have that in my .css. 

 I think that's why he said to add it

 

HA! I was trying to FIND .mainLogo instead of ADD.  Thanks pointing out the obvious.  I know you mumbled something under your breath after you posted this (lol). Appreciate the help.

Quote · 23 May 2014

Deano there is a reason I always recommend your products speak highly of you to others.  They always serve their intended purpose and work well for me.  On top of that you've saved me several times when I lacked the knowledge. Always very helpful where others are not willing to assist. So yet again thank you.

 

@Houstonlively, You make me smack myself in the head wondering why I missed certain things.  Thanks for keeping me paying attention to detail. lol

Quote · 23 May 2014
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.