Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #509935

    Hi there,
    I have few important questions:
    Q 1. I want my logo which is 1920px wide and 300px tall to go full width. It is only sitting in the middle at the moment. I want it to stretch all the way from the right edge of the browser to the left edge.
    I tried many days and night and tried all the codes that you have suggested in forum but unable to achieve something so basic, which is a real shame! Please help me out.

    Q 2. My website is extremly slow, I have never used a website as slow as this. It is hosting on godaddy’s economoy plan. Can you please help me figure out what is the main reason for this? is it hosting or something else? if it is hosting, please suggest me a proper host for wordpress website running enfold.

    Thank you very much!

    #510123

    Hi kaloraat!

    1. Add this to your custom CSS.

    .logo, .logo * { width: 100%; }
    

    You may want to resize the logo so it’s height is around 116px. Or if you want to increase the header a bit so it still looks normal then you can do that in Dashboard > Enfold > Header.

    2. Yes, your site is hanging up on something, took 20 seconds to load for me. I didn’t see anything out of the ordinary so I would say it’s something to do with the server. If your hosting provider doesn’t help you out here then I recommend trying out siteground, https://www.siteground.com/. I’ve been using them for about a year now, no problems so far, the support is very quick as well.

    Cheers!
    Elliott

    #510484

    Hi Elliott,
    It is not full width yet. It also moved to the left instead. I want it full width and 300px in height. That is the height of my logo.
    How to achieve that?

    #510640

    Hi!

    Please add following code to Quick CSS

    .html_header_top.html_logo_center .logo {
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    and set header height to 300px in Enfold theme options > Header

    Cheers!
    Yigit

    #510652

    Hi Yigit,
    Thanks for your reply. It is bit bigger now. However i want to make it stretch across the screen like the layer slider does, is it possible?
    Also, there is a big white space under the logo after applying the css that you suggested. If it stays the same, there is no point using it. It looks awful :)
    please suggest me a better solution, Thanks!

    #510654

    Hey!

    Please add following code to Quick CSS as well

    .logo img {
        width: 100%;
    }
    #header_main > .container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    Best regards,
    Yigit

    #510658

    Hi
    There is still big white space underneath, now when i scroll down the logo is distorted and pressed. this is the complete code i have applied so far.

    .logo, .logo * { width: 100%; }

    .html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }

    .logo img {
    width: 100%;
    }
    #header_main > .container {
    margin: 0;
    padding: 0;
    max-width: 100%;
    }

    #510669

    Hi!

    > sign was converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field. I fixed it. Please review your website now

    Best regards,
    Yigit

    #510680

    Great job, thank you very much Yigit. There is one thing still left to fix though:)
    when we scroll the page down, the logo gets distorted and pressed down which looks very unprofessional. How to scale the logo to smaller size if needed while scrolling the page down. I like the way header size shrinks on page scroll but I just don’t want the logo to get distorted like that.
    Can you please help fixing it.
    Cheers!

    • This reply was modified 9 years, 1 month ago by kaloraat.
    #510685

    its sad that we other users couldn’t see the page – we often have similar Problems – and so this solution might only be helpfull for you.

    2.) Very often the reason for slow speed is the missing of gzip; zlib compression on the serverside (check it here f.e.: http://checkgzipcompression.com/ )
    Maybe your logo is to big in size ? If it is possible to use instead svg files this might help in many ways. Even very small shrinked Logo is very sharp. The filespace is often very small. (have a look on this page: http://webers-testseite.de/koelnteam/wp-content/uploads/2015/09/koelnteam-logo.svg )
    the logo above is set via Sourcecode of svg :
    preserveAspectRatio="xMinYMid meet"
    to shrink to the left side but center on height.
    etc.

    only that fuc….. IE8 could not handle svgs. but you can do a fallback for that case to png/jpg.

    If zlib and or gzip is enabled you can use plugins like WP Supercache to speed up your site. etc. pp.

    • This reply was modified 9 years, 1 month ago by Guenni007.
    #510690

    Check out my website:

    kaloraat.com

    Website is running ok at the moment, I think it is server problem. Go daddy hosting is really not consistent. Thanks for your reply.

    • This reply was modified 9 years, 1 month ago by kaloraat.
    #510695

    site at the moment does not open. Server not found : why there is a result for gzip test from link above ??
    gzip is not enabled on the server “77% Could be saved by compressing this page with GZIP.”
    so contact your hoster or login at your hoster and have a look wether there are any possibilities to activate gzip compression.

    _ i could not achieve more than this here – http://webers-testseite.de/enf02/googlemap/
    the point is the shrinking header has its own js calculation of the header height.

    so a skew is resulting. If you have the whole screenwidth for logo width.

    The example above is set by:

    #header_main .container {
        padding: 0;
        max-width: 100%;
    }
    
    .logo img {
        display: block;
        height: calc(18vw);
        max-width: 100vw;
        padding: 0;
        width: auto;
    }

    the css vw means viewport width and for height i do a calculation because 1200:211 is nearly 18%

    • This reply was modified 9 years, 1 month ago by Guenni007.
    #510765

    Hi there, I repost it just to avoid confusion and make it easy for you to answer…

    Great job, thank you very much Yigit. There is one thing still left to fix though:)
    when we scroll the page down, the logo gets distorted and pressed down which looks very unprofessional. How to scale the logo to smaller size if needed while scrolling the page down. I like the way header size shrinks on page scroll but I just don’t want the logo to get distorted like that.
    Can you please help fixing it.
    Cheers!

    #511125

    Hey!

    I’m sorry but you can’t have a full width logo when the header shrinks because of the size of the image. You can add this in the Quick CSS field to center align the image on scroll:

    .header-scrolled .logo img {
        width: auto !important;
        margin: 0 auto;
    }

    Cheers!
    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.