Title says it all. I’d like to put two small flags inside the header div but it seems anything I put in there breaks the formatting. If somebody could lend me a hand I’d appreciate it.
You have fixed the height of the header
#header{
min-height: 140px;
max-height: 140px;
background: #000;
}
Setting both min and max widths the same is effectively fixing the height the same as saying height: 140px, I notice you have done this on a few elements.
If you want to add content (or not) it’s best to avoid fixed heights where possible. Just allow the content and any padding to define the height of the element.
1 Like
I’m adding a 140 height logo in the background through css and want two small 16x16px icons on top of that in html.
My issue is that adding these two icons in the html de-centers the navigation, causing the empty div on the leftmost side to disappear and the navigation to align to the left rather than staying centered.
My reason for min and max rather than simply doing height: 140px is because flex seems to react better to it.
Hi there RoyBread,
there is no indication of either the logo image or the flag icons in your code. 
How can we test your asserted problem without them ? 
coothead
1 Like
By adding anything (or specifically an image for accuracy) inside of the header div… or so I thought. Turns out doing it in jsfiddle does not break the formatting. Maybe because it can’t load the image files and instead displays the alt text?
I’ll make the necessary adjustments and get back to you. Sorry.
I found that adding content to your header did not affect the nav, the overflowing content just got hidden.
I have never come across this issue with flex, but then I try to avoid fixed heights like the plague. 
I was not suggesting to swap min-height and max-height for just height, but to not force any specific height and let the content you place in the element just take as much height as it needs. This is one of the fundamentals of fluid design. With your extensive use of flex-box and the fact it’s now a common standard, I assume a fluid design is your aim here.
Thing is, if I do that then the header is only going to take up as much space as it needs to fit the 11px flag icons inside of it and the 140px banner that’s to be later added as a background image through css would be largely hidden. At least that’s my assumption.
In any case, I sobered up and made some changes to the header structure. Now the header follows the exact same rules as the navbar and it all works as intended. It still confuses me why what happened happened, but this new structure is better so whatever 
The assumption is correct to an extent, the header will naturally shrink its height to fit the small content and the background, being just a background, will take/create no space at all in the element. But there are methods to fix that in a responsive way, adding padding-bottom will create some space to make the background visible. Using a percentage value for that will make that space dependant on the width of the element, so as the width decreases, the height will also decrease proportionally which is ideal for background images.
See my example in the recent thread.
Oh, that’s a really good suggestion. It’d display the banner in its entirety even on narrow viewports!.. or so I’d like to say but for some reason the content div isn’t shrinking at all when I view the page on my phone. It does on my computer but who ever uses a 400px wide viewport on a computer 
Do you have the viewport meta tag in the head section of your page? It was not in your original fiddle.
<meta name=viewport content="width=device-width, initial-scale=1">
Tried adding the stuff.
It certainly got down to size but it’s now broken in ways I don’t understand (mobile only).
You can go to abare.jp to have a look and compare the PC and mobile outcomes.
On the live site, the header and nav seem to be OK. It’s just the image that is stopping the main content being responsive. Giving the image max-width: 100%; height: auto should work. That’s odd, wrapping the image in a h2, I think figure may be more appropriate.
(Without making any chances since last)
For some reason the header is messed up in all of the Japanese tabs except for Index, while all the English ones work as intended despite them having the exact same code(as far as I can tell).
I’m confused.
Weird, now it all works. Maybe the host needed some time for the update to take full effect or something.
Sometimes your browser caches css and re-uses it, so changes you make don’t always appear, even on page refresh, which just does the html.
Ah, that makes sense. Gonna make sure to clear cache then. Thanks!
Padding doesn’t seem to do anything?
You can see the result at www.abare.jp
That’s because you put it on the wrong element, it’s on #header, try it on #header-wrap instead.
But then it still won’t work as expected (keeping aspect via %) because #header-wrap is a flex child of #wrapper.
Don’t get me wrong, flex-box is an awesome tool for RWD, but there is no need to apply it to everything on a page. Use it sparingly, only where required.
The majority of html elements are fully fluid by default. Flex-box is just for when you need to do something ‘clever’ beyond regular flowing layout.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.