Header Image & Header Area Zoom when resized

  • Unknown's avatar
    consistentsimplepure · Member ·

    Hi all,

    if I resize the Hemingway Rewritten demo site, the header image zooms horizontally and vertically. Especially the image is always shown in full height, i.e. it get zoomed after reaching its maximum height and width. Additionally, the header area gets larger than 426px if required.
    If I resize my page, the image zooms horizontally as well but the header area is always at a maximum of 426px vertically. The header image gets cut at the top and bottom to keep the aspect ration in the 426px vertically.

    I want my page to show the same behavior when resized as the demo page. Can anybody help me with this. ;o)

    BR,

    Marcus

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    nizamilputra · Member ·

    Hi there,

    You mean resize the browser?
    We can see your site, please unlock it first, so we can see your problem.

    Thanks.

  • Unknown's avatar
    nizamilputra · Member ·

    I mean, “We can’t see your site”.

  • Unknown's avatar
    timethief · Member ·

    Volunteers cannot view private blogs and we do not know exactly what you are on about here so we cannot help. I tagged this thread for Staff assistance. Please subscribe to it so you are notified when they respond. Note there is a backlog so you will have to wait patiently for Staff help.

  • Unknown's avatar
    timethief · Member ·

    @nizamilputra
    If the privacy is removed I’ll then remove the tag for Staff.

  • Unknown's avatar
    thesacredpath · Member ·

    Marcus, give this a try, go to Appearance > Header and change back to the default header. Next, go into your media library and delete your existing header image.

    Now, go back to Appearance > Header, upload your header image again (making sure it is 1280px x 426px before uploading it) and when it Skip the cropping.

  • Unknown's avatar
    consistentsimplepure · Member ·

    Hi there,
    I’m sorry, I totally forgot to disable the private mode. I’ve done that now.

    @thesacredpath: Thanks for your advice but my the image is 1280px x 426px already. Even the default image (the one that is used on the demo page) shows the same behavior.

  • Unknown's avatar
    consistentsimplepure · Member ·

    @nizamilputra: Bei resizsing the browser I mean that, for instance, I view the size in full screen mode on a very large screen (e.g. 2560 x 1440). The moment I view the site in a window that is wider than 1280px and at least 426px in height, the header-image/header area on the demo site is automatically enlarged. That is exactly the behavior I am looking for.
    On my site, the header area has unfortunately a maximum height of 426px + menu bar.

  • Unknown's avatar
    nizamilputra · Member ·

    I’m afraid it because you remove site-description with css. And some of your custom css codes makes your navigation menu weird in mobile view.

    Here I try to edit your custom css code and try fix you navigation menu too. You can paste it all and replace your current css code. 

    .site-branding{background-color:rgba(255,255,255,0.25);margin: auto;padding:1.3em 1.3em .6em}
.site-title a,.site-description{opacity:1}
.site-title a{display:none}
.site-description:before{display:none}
.site-description{display:none}
.site-title{background:url('//consistentsimplepure.files.wordpress.com/2014/10/csp-logo-1.png') center center no-repeat;width:250px;height:40px;display:block}
.main-navigation{line-height: 1.5}
.main-navigation ul{text-align:right}
.main-navigation li{display:inline-block;float:none}
.site-title,.site-description,.main-navigation ul,.main-navigation li{font-family:“Helvetica Neue”, Arial, Helvetica, sans-serif !important}
.site-title{font-size:3rem !important}
.site-description{font-size:1.8rem !important}
.main-navigation ul{/* display: inline; */font-size:1.8rem !important}
.main-navigation il{font-size:1.8rem !important}
body,button,input,select,textarea{line-height:1.5em;font-size:1.5rem;font-family:“Helvetica Neue”, Arial, Helvetica, sans-serif}
.site-content{margin-top:2.4em}
.widget ul li{margin:.1em;padding:.1em}.hentry{padding-bottom:3.4em}
.site-branding-wrapper{margin-bottom: 6em}
@media screen and (max-width: 800px){
 .main-navigation ul{text-align:left}
 .main-navigation li{display:block;}
}

    Please let me know if you need another help.

  • Unknown's avatar
    consistentsimplepure · Member ·

    Hi nizamilputra, thank you very much. ;o) You’re the man.
    As far as I understand, regarding the header image: the theme behaves exactly as on the demo page if the background image is exactly 1280x426px. Therefore, you removed all of my strange header related CSS code and kept only the custom CSS code regarding other elements. There was no special adjustment regarding the header? Am I right?
    However, thanks again. You helped me a lot.

  • Unknown's avatar
    nizamilputra · Member ·

    Yes, you are right. I made some css changes for .site-branding (where site title and site description inside it). Because you changed it margin and remove site description, consequently the header image height also changed. So I add margin-bottom for .site-branding-wrapper to make .site-branding has same height before you remove site-description. And remove negative margin for .site-branding.

    .site-branding-wrapper{margin-bottom: 6em}
.site-branding{margin: auto;}

    I also made a change for navigation menu. Because you make it alignment right with add attribute display: inline and custom css has higher priority than the original css, then we should re-define css for mobile;

    @media screen and (max-width: 800px){
 .main-navigation ul{text-align:left}
 .main-navigation li{display:block;}
}

    I also did some changes with other selector to make it fit.

  • Unknown's avatar
    nizamilputra · Member ·

    You are very welcome anyway :)

  • The topic ‘Header Image & Header Area Zoom when resized’ is closed to new replies.