Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • February 17, 2015 at 12:28 pm #397408
    PSchlenker

    Hello
    I have a logo which I’d like to have extending over the screen width.

    If you look at the following link

    http://pauline-schlenker.com/impressum/

    you can see the yellow colour of the logo. I’d like this yellow colour to extend to the end of the screen on the right hand side and for the left hand side to remain white with the text in the middle as it currently is.

    I have a jpg file with a larger yellow field (dimensions are 4728 * 401) but this just gets shrinked when I add it to the logo area.

    Is there anyway of adding a logo that goes across the whole width of the screen?

    If yes will this then adapt automatically to each screen size?

    Many thanks

    Regards

    Pauline

    February 17, 2015 at 3:01 pm #397518
    Yigit

    Hi PSchlenker!

    Please make sure to upload your logo in fullsize and then add following code to Quick CSS in Enfold theme options under General Styling tab

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

    Best regards,
    Yigit

    February 18, 2015 at 11:09 am #398011
    PSchlenker

    Hello Yigit

    Many thanks. That looks a lot better. That’s great support you guys provide.

    Can you look at the link again now with the change.

    http://pauline-schlenker.com/impressum/

    3 further questions

    1) The yellow colour still doesn’t go all the way to the end of the screen on the RHS. I’ve tried logos of various sizes (4728 * 401 or 990 * 84) and it doesn’t seem to make a difference. Is there anyway it can go right to the end of the screen.

    2) The text Pauline Schlenker Consulting & Coaching is somehow compressed and smaller than on the picture file I have. Is there anyway of making it less compressed?

    3) On the mobile version the logo is now really small. Is there anyway of making it adapt to the mobile version? Or if not can I do a separate logo for the mobile version?

    Many thanks.

    Regards

    Pauline

    February 18, 2015 at 4:36 pm #398242
    Yigit

    Hey!

    Please add following code to Quick CSS as well

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

    That should work once you insert your logo in fullsize. It is still being uploaded at size 990x84px. If you do not mind creating a temporary admin login and posting it here privately, we can make the changes for you :)

    Cheers!
    Yigit

    February 18, 2015 at 5:03 pm #398267
    PSchlenker
    This reply has been marked as private.
    February 18, 2015 at 5:14 pm #398272
    Yigit

    Hey Pauline!

    Thank you for choosing Enfold :)
    I have made the changes. I had to increase the header size to 300px to avoid logo having distortion. Please review your website now

    Best regards,
    Yigit

    February 18, 2015 at 5:34 pm #398292
    PSchlenker

    Hi Yigit

    Great – it now covers the screen. I think its too big at 300 px though so I’ll ask the logo designer to send me a smaller one.

    Do you have any experience what size would be a good size so that it covers the screen width wise but isn’t too large? Probably a third of the height is large enough but I’ve no idea what that is in pixels.

    Can I change the header size to a smaller one by myself? Where can I change it? Will I need to change it each time there is an update of the theme?

    Thanks again

    Pauline

    February 18, 2015 at 5:38 pm #398299
    Yigit

    Hi!

    You can go to Enfold theme options > Header and change it at “Header Custom Height”. You do not need to change the header size each time when there is an update. To cover the screen all screensizes, at least 1920px width should be fine.

    Cheers!
    Yigit

    February 26, 2015 at 1:06 pm #402626
    PSchlenker

    Hi Yigit.

    I now have a smaller logo (1920 * 200) which goes across the screen and is not too big.

    Final 2 issues. On 21 ” PC with Internet Explorer it looks fine. On 13″ Macbook with Safari the logo still looks a little bit blurred (unless its my eyes!) and the main issue is there is a large white space between the logo and the menu. If I reduce the header size to 140px this disappears but then on the Internet Explorer Version the logo is no longer in the middle and doesn’t stretch to the end.

    You still have administrator access if you want to look at it.

    Many thanks for all your help.

    Regards

    Pauline

    February 26, 2015 at 1:26 pm #402632
    Yigit

    Hi!

    Can you please try adding folllowing code to Quick CSS 

    .avia-mac .logo img {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0); 
}
#header_main .container {
height: 150px;
}

    Best regards,
    Yigit

    February 26, 2015 at 2:33 pm #402669
    PSchlenker

    Hi Yigit

    I’ve added the code but it hasn’t changed anything. I’ve added it after the code you previously sent me or should it replace the previous code?

    Thanks

    Regards

    Pauline

    February 27, 2015 at 11:54 am #403333
    Yigit

    Hey!

    Can you please try adding !important rule as following and check once again

    .avia-mac .logo img {
-webkit-backface-visibility: hidden !important;
-webkit-transform: translateZ(0) !important; 
}
#header_main .container {
height: 150px !important;
}

    Best regards,
    Yigit

    March 3, 2015 at 11:18 am #405059
    PSchlenker

    Hello Yigit

    I now don’t have the large white space before the menu but for that after the menu instead. Also the logo is still blurred. Any ideas what I can do next.

    Thanks again for all the support.

    Regards

    Pauline

    March 4, 2015 at 9:22 am #405632
    Ismael

    Hey!

    The logo image is too large for the header container. Please resize it to 1400x150px then upload it again as logo.

    Cheers!
    Ismael

    March 5, 2015 at 11:02 am #406327
    PSchlenker

    Hi Ismael
    Resized it but still have the large white space below the menu line. Yigit had suggested the 1920 width so that the logo goes across the width of all screens. Can you suggest what would get rid of the large white space and give me a logo which would go across the width of all screen sizes?

    Many thanks.

    Regards

    Pauline

    March 6, 2015 at 9:57 pm #407306
    Elliott

    Hey!

    Instead of this.

    #header_main .container {height: 150px !important;}

    Try this.

    nav.main_menu {  top: -40px;}

    To get rid of the white space. Perhaps setting the logo image as the header background would work better in this case.

    Regards,
    Elliott

    • This reply was modified 9 years, 9 months ago by Elliott.
    March 11, 2015 at 11:58 am #409759
    PSchlenker

    Hi Elliott

    Taken out all the CSS code and set the logo as a header background and this works perfectly. Thanks for that.

    I’ve tried various screen sizes and it works well in all apart from on my iphone. There the header section end at the bottom quarter of the logo and cuts through it. On a tablet it works fine – just on a mobile phone. Any ideas of what I could do there?

    Many thanks for the great support.

    Regards

    Pauline

    March 11, 2015 at 12:47 pm #409776
    Yigit

    Hi!

    Please add following code to Quick CSS as well 

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all #header { height: 120px; }
#header_main { border: none !important; }}

    Cheers!
    Yigit

    March 16, 2015 at 11:52 am #412032
    PSchlenker

    Hi Yigit
    That’s sorted now. Thanks again for the great support. I highly recommend your theme. It’s excellent.

    Regards

    Pauline

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Wide logo covering screen width’ is closed to new replies.