Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 16, 2013 at 1:28 am #176125
    xpoveda

    Hello,

    http://www.coronatolive.com

    When I run firefox initially having cleared the cache before the logo image leaves very little and from there ok.
    In safari and chrome sometimes appears and sometimes not.
    In explorer always work well.

    What’s the problem?

    I have the following quick changes in the css:

    .logo { top: 10px; padding: 10px; position:relative; height: 200px; line-height: 200px; }

    #header_main { background-color: #600319; border-width: 0px;}

    #header_meta {
    border-top: medium none;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2) inset;
    min-height: 30px;
    z-index: 400;
    }

    without these changes work properly, what happens is that the logo I want to have bigger and that part of the header and subheader (where the breadcrumb) have a background color.

    Thanks!!!

    Xavier.

    October 16, 2013 at 8:20 am #176257
    xpoveda

    i add, the problem in chrome/safari is only when i reload directly with browser button. navigating in pages is oks.

    strange…

    any solution?

    king regards…

    xavier.

    October 16, 2013 at 10:05 pm #176660
    Devin

    Hey!

    The logo file you are using is far too big. Re-size it to the size you want it to display at and then you can use this css to increase the size of the logo/menu area if you want:

    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
height: 116px;
line-height: 116px;
}

    Edit: The css should go inside the custom.css file in your css folder and then inside the desktop media query.

    Regards,
    Devin

    • This reply was modified 11 years, 2 months ago by Devin.
    October 17, 2013 at 1:49 am #176794
    xpoveda

    Hi Devin,

    I modified the file custom.css to enfold / css and I have put on the desktop css media query you said.

    @media only screen and (min-width: 768px) {
    /* Add your Desktop Styles here */
    .social_header #header_main .container, .social_header .main_menu ul:first-child > li a {
    height: 300px;
    line-height: 300px;
    }
    }

    I have increased the value of the logo from 167 to 300px.

    Logo.png image also I left at 300px and I uploaded it to wordpress.

    The result is:

    1) Explorer, chrome and safari ok.
    2) Firefox when page load first (HTTP code 200) very small image returns. When subsequent load (HTTP code 304) the image correct returns.
    3)Without modifying the css and upload a 150px image also happens.

    It seems to be a problem only with the first load firefox.
    Try to make a reload in firefox by pressing the “shift” key to clear the cache and you’ll see.

    167px is very small for customers…;), they want to see your logo bigger ;)

    As I can do to fix it?

    Thank you!

    Xavier.

    October 18, 2013 at 4:20 pm #177458
    Devin

    Traditionally customers want to see your product/services and the logo is pretty far down on what they want or need to see which is why by design the header is small on the majority of website you’ll see (including in enfold).

    In Firefox I’m having no issues loading up the larger logo on any page load.

    October 18, 2013 at 6:33 pm #177527
    xpoveda

    i devin, yes but my customers want big logo ;).

    the issue exist. shift key + reload page http://www.coronatolive.com in firefox for imac and the logo is super little.

    thanks!!

    xavier.

    October 19, 2013 at 12:08 am #177603
    xpoveda

    Hi, whith chrome don’t works too sometimes……..

    I put my code of “custom.css”.

    ——–

    @media only screen and (min-width: 768px) {
    /* Add your Desktop Styles here */

    h1, h2 {
    font-family: “brandon-grotesque”,sans-serif; font-weight: 900; font-style: normal;
    }

    h3, h4, h5, h6 {
    font-family: “brandon-grotesque”,sans-serif; font-weight: 900; font-style: italic;
    }

    /* META */
    #header_meta { background: #600318; }

    /* HEADER */
    #header_main { height: 200px; line-height: 200px; background: #600318; border: none; }
    #header_main .logo { height: 200px; line-height: 200px; top: 0px; }

    /* POSICION DEL MENU */
    .main_menu
    {height:25px; top:75px; right: 0px;}

    /* POSICION DE LA BARRA */
    .main_menu ul li a {height: auto !important; line-height: 40px !important; }

    /* MENU 1 */
    .main_menu ul:first-child > li > a
    { font-size: 20px; font-family: “brandon-grotesque”; color: #FFFFFF !important; padding:2px 7px; }
    .main_menu ul:first-child > li > a:hover
    { color: #5B8C00 !important; }

    /* MENU 2 */
    #top .main_menu .menu li ul a
    { font-size:12px; line-height: 9px !important; font-family: “Source Sans Pro”; color: #000000 !important; }

    /* TITULO */
    .title_container .main-title { display: none; }

    /* PESTAÑAS WOOCOOMMERCE */
    #top .woocommerce-tabs .tabs li a {
    cursor: pointer;
    margin: 0px 0px 0px 0px;
    display: block;
    float: left;
    z-index: 2;
    position: relative;
    padding: 12px 16px;
    top: -1px;
    font-size: 11px;
    -moz-user-select: none;
    border-style: solid;
    border-width: 1px;
    }

    }
    ——–

    Thanks so much!!!

    Xavier.

    October 20, 2013 at 9:00 am #178020
    Dude

    Hey!

    I wonder if the logo resize script doesn’t work properly in your case. Try following – open up enfold/js/avia.js and replace

    
        if(navigator.appVersion.indexOf("MSIE 7.") == -1)
    	avia_resize_menu();

    with

    
/*
        if(navigator.appVersion.indexOf("MSIE 7.") == -1)
    	avia_resize_menu();
*/

    Regards,
    Peter

    October 23, 2013 at 1:27 am #179305
    xpoveda

    Hi Dude,

    oh yeahhhh, now works perfectly!!!

    Thanks so much!!

    Xavier.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘bad load logo image with css changes’ is closed to new replies.