Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 29, 2020 at 3:30 pm #1263783
    lausy

    Hi all,
    I’m new to the enfold theme and just started building a simple website based on two of the demos.
    When I upload my own logo, which is 964×200 pixel, an set the header to “logo center, menu below”, the logo doesn’t appear in his original size in Firefox, while in Chrome and IE everything is looking fine.
    If I change the header oprtions to anything elese, let’s say “logo left, menu below” for instance, it looks good in all browsers.
    Already looked around in this forum and based on some results, I found out that removing the
    max-width: 100%;
    in img solves the issue for the moment – but I guess this shouldn’t be the solution.
    Here are some screenshots demonstarting the problem on one of the demos.

    Thanks & greetings

    • This topic was modified 4 years, 3 months ago by lausy.
    December 1, 2020 at 6:31 am #1264129
    Rikard

    Hey lausy,

    Thanks for the screenshot and sorry for the late reply. Could you post a link to where we can see the actual problem as well please?

    Best regards,
    Rikard

    December 3, 2020 at 7:16 pm #1264835
    lausy
    This reply has been marked as private.
    December 5, 2020 at 5:25 am #1265113
    Rikard

    Hi Joerg,

    Thanks for that. I compared your site in Chrome and Firefox, but I can’t see any differences between the two. Could you post a screenshot of the problem, and let us know how to reproduce it please?

    Best regards,
    Rikard

    December 5, 2020 at 1:56 pm #1265177
    lausy

    Hi Rikard,

    you’re right, there is no difference when viewed in Firefox or Chrome, I think both are showing the header logo incorrect.
    FF/Chrome Screenshot where you see space between logo and menu bar.
    IE Screenshot where the logo image is displayed in it’s original, full sizewith no space between logo and menu bar.

    Greetings,
    Joerg

    • This reply was modified 4 years, 3 months ago by lausy.
    December 9, 2020 at 7:40 am #1265927
    Ismael

    Hi,

    Thank you for the update.

    It looks like that because the browser has to retain the aspect ratio of the image. To make it full width or to increase the width of the alternate logo image, try to use this css code. 

    
.responsive .logo {
        width: 100%;
}

.responsive .logo img.alternate {
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

    Best regards,
    Ismael

    December 9, 2020 at 10:31 pm #1266145
    lausy

    Hi Ismael,

    thanks, that solves the problem with the image size.
    But now the logo drifts to the upper left corner when scrolling down the site and stays there – but it should stay centered . Can you please have a look again?

    Thanks & greetings,
    Joerg

    • This reply was modified 4 years, 3 months ago by lausy.
    December 10, 2020 at 7:32 am #1266204
    Ismael

    Hi,

    Thank you for the update.

    This css code should keep the main logo aligned to the center on scroll.

    .logo img {
	left: 50%;
	transform: translateX(-50%);
}

    Best regards,
    Ismael

    December 10, 2020 at 1:07 pm #1266279
    lausy

    Hi Ismael,

    this solved the problem, thank you very much!
    May I ask you a another question regarding the same site? (Or should I create a new thread for this?)
    If you look at the “Leistungen” site, you see the title text “Unsere Leistungen” is partly covered by the menu. I tried to change this, but the element doesn’t like the vertical-align option. I only want to move the text below the menu, the gray background is in correct position & size.
    Example

    Thanks & greetings
    Joerg

    December 13, 2020 at 12:10 am #1266813
    Ismael

    Hi,

    Glad it is solved. Please open a new ticket or thread for new inquiries or requests to keep this post concise and to avoid unnecessary confusion. We will close the thread for now.

    Thank you for your understanding.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Header image size differs in Firefox / Chrome / IE’ is closed to new replies.