Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 17, 2015 at 5:43 am #488560
    marikafed

    Hi,

    I would like to have a large logo image at the top of the page. I have set the site width to be the same size as the logo, and the header height to be the same, but the logo appears small surrounded in white space that is the size it should be on chrome (windows 7, 10, and tablet), safari and edge browsers. Interestingly enough, it looks correct in IE10 (and on a smaller phone screen).

    Editing the HTML in chrome I unchecked these parts of the CSS and it showed correctly:

    .html_header_top.html_logo_center .logo {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    }

    I am on WordPress 4.2.4 and Enfold 3.2.3

    I tried a couple of the other CSS solutions I found for what sounded like similar issues, but not had any luck with them yet.

    Thanks!

    August 17, 2015 at 7:17 am #488606
    Basilis

    Hey marikafed!

    Everything is possible, but that would need a lot of work to be done.

    You can contact one of our Customization Contractors, who will help you out with the process.
    http://kriesi.at/contact/customization

    Let us know if we could do anything else, regarding our theme

    Regards,
    Basilis

    August 17, 2015 at 9:14 am #488694
    marikafed

    You have confused me now – I didn’t think this is a feature request, but sounds more like a bug report. I am trying to do something fairly simple – a large image as a logo. This thread sounds like what I want exactly:

    https://kriesi.at/support/topic/how-to-add-a-header-background-image/

    And I followed the simple instructions, and it works perfectly. Just only on Firefox or IE 10. It looks wrong on web-kit (which is the majority of browsers so I’m not ignoring it).

    Now, I am fairly rusty on the web side so I’m not sure if this is a) a bug in webkit b) strange instructions being given by wordpress / enfold or c) something I am doing wrong.

    I am also not an expert in CSS, so would welcome any hints on how I could override / turnoff the translate bits I have given above to fix it? Is this possible in the quick CSS? Or would I have to edit the theme files? If I leave the logo set as large would I be missing anything to remove these bits?

    Thanks

    August 17, 2015 at 1:56 pm #488904
    Andy

    Hi!

    please follow this thread about your issue: https://kriesi.at/support/topic/header-background-image-4/#post-220782

    Cheers!
    Andy

    August 17, 2015 at 3:36 pm #488960
    marikafed

    OK, that took a bit of time while I learned some CSS basics, but I have a solution that works for me. What I have is added this to the custom CSS section:

    #header_main > .container {
    padding: 0;
    }
    .html_header_top.html_logo_center .logo {
    clear: left;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    position: initial;
    }
    .html_header_top.html_logo_center .header-scrolled .logo {
    margin-left: 25%;
    }

    The logo now looks correct on Firefox and webkit.

    I have added a margin when the shrinking header is enabled, to keep the image in the center. This works OK when it is full shrunk, but for a couple of positions it is to the left, but I will live with this for now.

    There might be a layout I can apply to the logo element to be centered all the time, but I need to move onto other things. Maybe I will learn that later.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Header image not full screen on webkit browsers’ is closed to new replies.