Thanks a lot for those clarifications Ray.H
That would be it, in the style sheet I posted above I had thisā¦
.topnav {
/*no styles needed at this point*/
/*browser knows it is a flex-item since .header is display:flex*/
}
Now it would be thisā¦
.topnav {
align-self: flex-end;
}
It looks like you still got the left margins on your list items for the responsive menu. I had those adjustments done for you. What happened?
Update your live page and post the link.
2 Likes
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;
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ā¦?
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;
}
@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*/
}
1 Like
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.
2 Likes
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.
<!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)
4 Likes
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
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ā¦
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
2 Likes
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.
2 Likes
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.
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.
2 Likes
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/
Thanks for this suggestion Ray. I kept this file too for my reference.
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).
2 Likes
ā¦ and mobile users canāt drag the screen at all and will just see what they see:)
4 Likes
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.
1 Like
sorry did you mean changing it in the browser setting or for the body { font: normal 100% Arial, sans-serif;} ā¦?
@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.
2 Likes
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.
3 Likes