tried using the flex-direction operator to fill page up with sets of two images aligned in rows or columns…not really working out the way I wanted it to…looking to align cartoon images on top of the color photo images…not sure how to fix this, or what i did wrong, according to curriculum
Hello, halfmeasures.
In order to help you, we need to know more information. Are you referring to a website? Do you have a CodePen we can have a look at? Could you at least paste the code you have tried?
The more info you give, the more likely we can help.
sorry…forgot to add the link to my CodePen…i’ve edited my query now
I am not entirely sure what you are wanting as an end result, but have you tried adding:
#main {
flex-direction: column;
}
Hope this helps.
As I understand you want to fit in whole page with the cat images but you want to do it in a stylish way. You want align cartoon images on top of cthe color photo images and all 4 photo should cover the whole page.
First of all I would like to resolve on miss conception in your code.
Important : display : flex; on any container will convert only That container in to flexbox. It means that all it’s childs will be align in row. and you can use flex properties to manipulate that container’s child. Important point is that you can not use flex properties on their child’s child.
In your code when you apply display: flex on #maiin container, now your header and footer will be align in row as default flex style. But It will not make #header and #footer a flexbox. it means you won’t be able to manipulate header and footer’s child component by flex properties.
I saw that you applied flex-direction : row; inside the #header block which meant that you wanted to align items of header in row, but as header is not flex-box that property won’t work.
So, here is how you do it.
First of all you will need to divide whole page in to two big flex-box.
We will keep your HTML same but we will change your css.
You have two div container header and footer. You have applied display: flex on #main, which brings our header and footer side by side in row. It’s width is already 100% Now let’s give #main height : 100vh. so we can give it’s child component height of 50vh; each and height of
That will cover all space divided in to two parts by Header and Footer.
*{
margin: 0px;
}
#main{
width: 100%;
height : 100vh;
display: flex;
}
#header{
width: 50%;
height : 100%;
}
#footer{
width: 50%;
height : 100%;
}
img {
width : 100%;
height : 50%;
}
Now The Images in the #header and #Footer should cover 100% width and each image shouldd have height of 50%;
Now, how can you use flex-direction : column or row here.
We will remove width from header and footer and make it a Flex container by adding , display : flex;
At this point flex-direction is row , so that two images in header and footer will come side by side.
now we will add the flex-direction : column to get the images in column.
whola! that’s what you need to do. But , as you may see that it will not cover the 100% pf the browser width because we had remove the width : 50% from the header and footer. We need that to cover full width. But in flex-box we use flex-basis : 50%; you can google about flex-basis.
Now, instead of using width : 50% on the
*{
margin: 0px;
}
#main{
width: 100%;
height : 100vh;
display : flex;
}
#header{
display : flex;
flex-basis : 50%;
flex-direction : column;
}
#footer{
display : flex;
flex-basis : 50%;
flex-direction : column;
}
img {
width : 100%;
height : 50%;
object-fit : cover;
}
If you are curious about object fit cover. I would like to share that it is not necessary but I applied it to maintain image ratio. If you like it I would recommend you to explore Object fit property more on google.
Happy Coding. Sorry, M newbie writer so I guess I wrote very long.
1 Like
thank you for your suggestions…after playing around with it (using your guidance) I decided to make these images a banner for the top of the page…you made it a lot easier to understand the flex features
1 Like
well…now I have another issue…wanting to add sections below the banner of images…not sure what i did wrong here, or how to fix it…want the section of page title below banner of images
Oh! I see that you have added display: flex; property on #main container.
Which means that all it’s child will be rendered in a row.
Since the <div class = 'top'> is also direct-child of #mainit that is why it’s being rendered in the row. Now, I would like you to solve this. before you read the next section.
Solution is blurred, click and reveal it after you try to solve it yourself.
You can remove display: flex; from the #main and you should add one more conatiner in #main which will enclose all banner of images, let’s say you named it #header-container. Than you should give that component : display : flex. that wil make only all childs of header-container to be show in row. while header-container and div class = ‘top’ is child of #main. and since display : flex is removed from #main. They both will be show in the column.
Thank you for your help with this. Work hasn’t gotten very busy since then. So, I’ve only recently been able to make room in picking it back up again. Something else I’m having trouble with this activity, is finding info on creating a Nav Bar? I couldn’t find this listed anywhere in the curriculum. Do you know where I can find this information?