Homepage › Community Forums › Epik Theme Support › Big Header Issue
Hey Everybody,
I tried to follow Jack’s instructions for a larger header size, from this page: https://appfinite.com/topic/custom-header-responsiveness/. I can’t seem to get it to work correctly.
I’m working on this page: http://www.monetizedmom.com
Thanks for any ideas
I can’t figure it out either. There must be something added somewhere in the css that is preventing it from adjusting like it’s supposed to, but I can’t see where it’s coming from.
I can get the main part of the logo to resize and look good and centered on mobile browsers when I check, but I can’t seem to get the entire logo to show up perfectly. It cuts the side of it off.
Anyone else out there mind helping us out? Hopefully someone can see what I’m missing.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Thanks for looking into it for me, Eric.
@theapril Try changing the title-area
width to a percentage. Example (line 4522) –
.title-area {
float: left;
padding: 0;
padding: 0;
width: 100%;
}
At the moment, the title area is set to a fixed width around 825px which is the cause of the image not resizing and being cut off.
I would also remove the margin-left
that was added on 4531 so that the image will center when viewed on mobile devices or when the browser is resized –
.header-image .title-area {
padding: 0;
margin-left: -45px;
}
You can change the widget area width to auto
on line 4050 –
.site-header .widget-area {
width: auto;
}
Since your logo is large, you would have to make some changes to the responsive section of the css to have certain parts kick in at certain sizes/browser widths. If you want me to login for you and add all of this in I can, just let me know.
Ok I just got it fixed by adding in some of the code suggestions mentioned above. The only other thing I would recommend doing is removing the extra transparent space on the left side of the logo image (using photoshop or whichever program you use). The image centers perfectly when viewed on mobile browsers, but since there is some space on the left side (inside the image itself) it visually looks as if the image isn’t centered. So once you cut that part out then it will appear centered.
Also, I noticed a couple CSS errors in the code that you may want to look out for in the future. I went ahead and corrected them, but near the end of the file I saw one spot that had too many brackets, and another was missing a bracket.
I just checked your site on an iPad and it looks good! Let me know how everything looks from your end.
Thanks! Yes, I have a bad habit of changing my css in the browser instead of FTP. I’m trying to break myself of that right now.
The right header widget (social icons) is now way down the page when viewed on my iPhone.
I fixed it. I had to adjust the .header-image .site-title a min height from 260 to 110px. Now it looks great!
Great! Just let me know if you need anything else.