Header layout

810311 · November 23, 2018, 10:12pm

Please see test link in previous post # 92 for the updates. Its working perfectly. Thanks again Ray. Sorry not sure what happened I could have accidently typed the wrong code or deleted something.

Just out of curiousity I commented out /* display: block; */ in .header .ham-icon in the responsive version and added display: flex; align-self: flex-end; which seems to perfectly align bottoms of ham icon and menu items. h1 bottom is slightly off (please see attached screenshot) - I tried adding few pixels of padding-top and it seems do the trick. Not sure if I need any more adjustments since the main layout is done and it is what I was looking for. I might just fall back to your previous version without align-self: flex-end;

810311 · November 23, 2018, 11:23pm

I just opened the page in firefox and chrome and tried sizing (shrinking) it down and it seems there’s a little issue in firefox - ham icon flushes to the left and h1 doesn’t adjust…

my understanding this needs an extra media query…?

Ray.H · November 24, 2018, 4:47am

When dealing with vertical alignment of different size fonts you need to realize that their line-heights are in relation to their font-size. Your h1 is roughly 2em and your menu links and ham icon are 1em.

Even though they align at flex-end you are seeing line-height differences.

The easiest way is to leave the flex-end as it is and use a bottom margin on your ham icon and your topnav ul.

Had we been dealing with inline elements (rather than flex items) we could have used
vertical-align: text-bottom;

The 4px bottom margin I added to the topnav ul doesn’t really need to be removed on the media queries as it does no harm. It is there but it does not effect anything.

If you need to cater to people who zoom text only then convert that 4px to ems’ (0.25em)


.topnav ul {
  display: flex;
  margin: 0 0 4px 0; /*shift it up 4px to line up with h1 text*/
  padding: 0;
  list-style: none;
}

va-bot-ham


@media screen and (max-width:960px) {

  .header .ham-icon {
    display: block;
    margin-bottom: 4px; /*shift it up to line up with h1 text*/
    margin-left: auto; /*shift it to the right when it drops to new line*/
    cursor:pointer;
    color: #999;
    /*outline: 1px solid red; /*see what's happening*/
  }

Ray.H · November 24, 2018, 5:01am

Actually it does happen in chrome too. When you are in responsive mode and you are able narrow your viewport down smaller.

It’s just dropping to a new line since that’s what it really needs to do, and what it was told to do in the flex-wrap rules.

  .header {
    position: relative; /*creates the stacking context for the absolutely placed child .header:before*/
    flex-wrap: wrap;
  }

You can push it back to the right with margin-left:auto; which I already added in the last post.

wrap

Ray.H · November 24, 2018, 4:46pm

Sorry, I meant baseline. vertical-align: baseline;

Looking back over flex specs I see that IS one of the values. So just use it instead of the nudging around with margins that I suggested.

baseline

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.header {
  display:flex;
  justify-content:flex-start;
  align-items:baseline;
}
.header > *{
  margin:1em;
}
span {
  font-size:1.2em;
  margin:0 1em;
}
</style>

</head>
<body>

<div class="header">
  <h1>Align-Items: Baseline</h1>
  <div>
    <span>link</span>  <span>link</span>
  </div>
</div>

</body>
</html>

EDIT:
Here’s all the changes that I’ve mentioned to this point.
I also added a 7px right margin on your <h1> to keep the ham-icon from butting flush with it.
style-flex.css (5.5 KB)

ham-icon

810311 · November 25, 2018, 12:21am

Thanks for those suggestions Ray. I tried running it with your changes thru firefox and chrome again.

For some reason I am not able to shrink it down to smallest possible size in chrome - the smallest I get is this chrome-smallest-size-i%20am-able-to-shrink

so I opened it in chrome - developer tools - toggle device toolbar and tried running it thru different devices. The only issue seems to be older version of iPhone 5/SE (my guess is not many folks use this nowdays) - it works as intended in all the rest of devices in that drop down list.

So because of the above I was wondering if its possible to center align h1 and ham icon on smallest screens like in the following screenshot but only cater it for the smallest screens just to be safe ? This center alignment looks more in tune with the footer as well…

menu-items-center-on-small-screen

Ray.H · November 25, 2018, 4:55am

Yes you can center them up and force the ham icon down at the same time.
We can do that at 380px, that forces the icon down before it gets pushed down.

I slipped this new media query in at the bottom of you stylesheet and removed some of the styles I had in there earlier.

@media screen and (max-width:380px) {
  .header  {
    flex-flow: column wrap; /*stay in flex (for .topnav order: 1;), but stack as blocks*/
  }
  .header h1 {
    margin: 0 auto;
    text-align: center;
  }
  .header .ham-icon {
    margin: 0 auto;
  }

}

style-flex.css (5.7 KB)

You should see it work like you are wanting it now.

I let you make your own adjustments now, but give a shout if you get stuck after attempting any changes.

Hope that helps

PaulOB · November 25, 2018, 12:11pm

I assume you mean by closing the browser window smaller? If so then that will be limited by the number of tabs you have open and the number of items in the chrome toolbar etc. Just use the toggle device option in the devtools (as you found out)

You need to go down to 320px which will cover the iphone5 (and iphone4) as well as the SE version which is actually a new model as there are still a considerable number of users. I’m still using an iphone5s and have no plans to change as I like the smaller size.

810311 · November 25, 2018, 7:21pm

got it. so I just replace @media screen and (max-width: 380px) with @media screen and (max-width: 320px) ?

No I didn’t have any other tabs open in Chrome thats why I was surprised why its not shrinking down but anyway I will use dev tools. Thanks Paul.

PaulOB · November 25, 2018, 7:43pm

No, you just need to make sure that the rules you put in the 380px media query are suitable for screens down to 320px.

You don t really want to add another media. query when a couple of small tweaks will cater for sizes from 380 down to 320px.

Remember these are max-width media queries which apply to anything less than or equal to that size.

I think you’d be better off just reducing the font size of the h1 so that the hamburger sits on the same line. It looks awkward to me when you drop it below.

810311 · November 25, 2018, 11:28pm

I tried keeping h1 and ham icon in default flex direction row since they are both flex items and changed media query to

@media screen and (max-width:380px) {
  
  .header h1 {
    font-size: 8.5vw;
  }
  .header .ham-icon {
    margin-left: auto; 
  }

}

It appears do the trick however there’s some slight “jumping” of h1 text and the icon after it reaches 380 breakpoint. Quick google search revealed that calc() could be a solution to control scaling of text. Not sure if this is the case with the above media query…

Here’s an updated link http://buildandtest.atspace.cc/

810311 · November 25, 2018, 11:30pm

Thanks for this suggestion Ray. I kept this file too for my reference.

Ray.H · November 25, 2018, 11:58pm

That jumping is the text changing size while your dragging the window smaller.
Then the ham-icon is jumping trying to line up with a baseline that is changing, it’s trying to line up with a moving target.

The final computed font-size after I got the window as small as possible in firefox was 25.5px. Of course that is with my default font size at 16px. I just changed it to 18px and the icon drops down right before the query kicks in.

So theoretically if you set your font-size to 26px (rather than 8.5vw) at your 380px breakpoint then that should resolve the jumping. The 8.5vw does not allow the h1 text to zoom, only the icon zooms until it gets big enough to drop down.

I wouldn’t have a problem setting a fixed px font-size on the 380px query.

Normal visitors don’t drag their viewports around as much as a web developer does (for the most part).

PaulOB · November 26, 2018, 12:12am

… and mobile users can’t drag the screen at all and will just see what they see:)

Ray.H · November 26, 2018, 12:15am

See my edits above about changing my default font-size to 18px
I would make some sort of concession for the icon to drop in some cases.

810311 · November 26, 2018, 12:43am

sorry did you mean changing it in the browser setting or for the body { font: normal 100% Arial, sans-serif;} …?

ronpat · November 26, 2018, 12:48am

@Ray.H is talking about the font size in his personal browser. As you know, the font-size in the user’s browser determines the overall font size of a responsive page. It is a factor that must be taken into consideration when designing a responsive layout.

810311 · November 26, 2018, 12:57am

Thats what I thought. Thanks for clarification Ron. Anyways this initial layout is done and I am going to try build my next page for the site using this layout. Thanks guys for all your help, advice and support. Tons of new stuff for me but its fun! I went to my profile settings and saw there’s an option to download a forum thread. I would like to keep this whole thread for my reference in the future.

Would it be OK if I start a new thread when I need your help with the next page? I would prefer having separate threads if possible.

ronpat · November 26, 2018, 12:59am

Absolutely, Yes. Assuming the topic is different, we would prefer separate threads, too.

system · February 25, 2019, 7:59am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.