I think you also mentioned that behaviour in css comments. but thanks for expanding on that.
1 Like
Even though its true, I still have to try and learn āright tool for the right jobā approach. I think its my main issue - figuring out what technique is best suited for the specific taskā¦
2 Likes
I wholeheartedly agree! 
1 Like
I added some test images to flexbox version and uploaded it for review. please take a look at test link in post # 14.
Following are some changes I made to flexbox layout just to see what happens:
-
I am using images 600 x 425.
-
header > div, main, footer > divchanged width to 90% and max-width to1600px; -
main > divchanged flex-direction to column
questions:
-
with flex-direction: row the images are not scaling proportionally but flex-direction: column appears to fix the issue
-
I really like the layout of this portfolio page http://www.mlwebco.com/work/. I looked at view source and it appears its using flexbox. So I was wondering if same behaviour can be implemented in your flex-layout, Ron. The only difference is that I am planning to have 3 images per row. I also noticed that at that layout images are not gradually scalingā¦even though its flexbox based. It looks like they have a fixed size although I am not sureā¦
Correction for above code snipet
Good call.
Might I recommend a couple of other choices:
(1) in addition to {flex-direction:column}, also add {justify-content:center}
main > div {
display:flex; /* flex items can be flex boxes, too. */
flex-basis:33.33%; /* similar to width except more flexible */
flex-direction:column; /* preserves aspect ratio */
justify-content:center; /* also add Me to vertically center images within each row */
}
(unless you are satisfied with the row of images top aligned.)
(2) add {align-items:center} instead of adding {flex-direction:column}.
main > div {
display:flex; /* flex items can be flex boxes, too. */
flex-basis:33.33%; /* similar to width except more flexible */
align-items:center; /* Add Me to preserve aspect ratio and vertically align images in each row. */
}
Details of these properties can be found within the flex references already given. 
Sure will do. But can you explain why changing to flex-direction:column helps to keep aspect ratioā¦? Does it have to do with the fact that main axis changes its direction from horizontal to verticalā¦?
Itās a good question, but I cannot answer it. There are other methods that do not involve {flex-direction:column} that preserve the aspect ratio of the image. I do not understand enough about flex to answer the specific question about {flex-direction:column}.
Here is a third choice:
main {
display:flex;
flex-wrap:wrap;
justify-content:space-around; /* In this layout, this affects the last row if it has fewer content boxes than the preceeding rows. Comment out to test; try other values. */
align-items:center; /* preserves aspect ratio and vertically centers images */
margin:0 auto;
}
main > div {
flex-basis:33.33%; /* similar to width except more flexible */
padding:7px; /* it is better to assign padding around a foreground image to its parent container rather than to the image itself */
}
2 Likes
I changed the code to your third version as I find it better logically structured: both alignment rules are within same declaration main { and as a result main > div { has less code
Thats OK, Ron because as you mentioned there are other methods that work and help preserve aspect ratio.
I slightly changed CSS to accomodate two columns layout for now. I also removed logo. I am working on the header now. I am trying to style the nav. Please take a look at test link in post # 14.How can we distribute space evenly between each nav item and also decrease/increase space between items?
<off topic>
Sergiy,
Do you have a URL to the original mountain scene image that you are presently using?
</off topic>
Looks like border-spacing: 20px 0; set on header nav ul { working to increase space between menu itemsā¦
Not sure if px is a good choice for this property for this layoutā¦
actually padding-left on header nav ul li seems a better choice than border-spacing since it only increases distance on the left whereas border-spacing increases on both side shifting the whole menu to the leftā¦
Sergiy!
Here are a couple of variations of the header for you to play with. Letās see if either of them moves you any closer to your desired design.
1 Like
Hi Ron,
Thanks for the header variations code.
I am trying to use the following code
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
to build same type of drop down nav as in link I posted back in post # 47 (on resizing the page horizontal nav flips into hamburger button and on click becomes a drop down menu).
Can you take a look at my test link in post # 14? This is where I am at right now. I canāt figure out how to modify the code from w3schools further to achieve same drop down as in post #47. Not even sure if I am on the right pathā¦
Actually this menu looks like what I am looking to implementā¦so may be I should disregard w3schools oneā¦
https://www.jqueryscript.net/menu/Hamburger-Dropdown-Menu-jQuery.html
Hi,
In your example at http://buildandtest.atspace.cc/ you can add the following to display the menu below the header when clickedā¦
@media screen and (max-width: 960px) {
header {
flex-wrap: wrap;
}
.topnav.responsive ul {
margin: 1em 0;
display: block;
padding: 0;
}
.topnav.responsive {
flex: 1 0 100%;
order: 1;
}
.topnav.responsive li,
.topnav.responsive a {
display: block;
width: auto;
}
.topnav.responsive a {
padding: 10px;
text-align: center;
background: #e64f44;
color: #fff;
border-bottom: 1px solid #f9f9f9;
}
.topnav.responsive a:hover {
color: #e64f44;
background:#fff;
}
}
Not sure if that is what you were after 
2 Likes
This is very close to what I am trying to implement. Thanks Paul. I have couple of questions:
-
Is it possible to tweak this menu so it doesnāt push the main content down but drops down over the image thumbnails - same behaviour as the menu shown via link in post#47.
-
what CSS property would be best to use to add some delay effect when it drops down (please see link in post #47)
You would need to make the menu position:absolute if you want it to sit on top of the following content.
To add a transition (without using js) you would need to animate the opacity and the top position and not use display:none to hide it.
I would change the code I gave you earlier to something like this:
@media screen and (max-width: 960px) {
header {
flex-wrap: wrap;
}
.ham-icon {
position: relative;
z-index: 1000;
}
.topnav ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
left: -999em;
right: 100%;
top: -20em;
opacity: 0;
transition: top 0.5s ease,opacity 0.5s ease,left 0s 0.5s,right 0s 0.5s;
}
.topnav.responsive ul {
left: 0;
right: 0;
top: 0;
opacity: 1;
transition: top 0.5s ease,opacity 0.5s ease;
}
.topnav {
flex: 1 0 100%;
order: 1;
position: relative;
z-index: 99;
display: block;
}
.topnav ul li,
.topnav ul li a {
display: block;
width: auto;
}
.topnav ul li a {
padding: 10px;
text-align: center;
background: #e64f44;
color: #fff;
border-bottom: 1px solid #f9f9f9;
}
.topnav ul li a:hover {
color: #e64f44;
background: #fff;
}
}
That is making an assumption that the menu is always at the top of the page and that your submenu isnāt going to be taller than 20em in height otherwise you need to increase that height a bit more (although it wont be an issue either way as the menu is hidden off left anyway).
1 Like
sorry may be itās a dumb question but isnāt it z-index that makes it sit on top of other contentā¦?