Skip to content

Branches, Kristy #33

Open
kristyh32 wants to merge 1 commit intoAda-C12:masterfrom
kristyh32:master
Open

Branches, Kristy #33
kristyh32 wants to merge 1 commit intoAda-C12:masterfrom
kristyh32:master

Conversation

@kristyh32
Copy link

Startrly

Congratulations! You're submitting your assignment.

Comprehension Questions

Question Answer
Describe a time you chose to use flexbox I used flexbox for the sponsors because that seemed
Describe a time you chose to use CSS Grid I used grid for the navigation menu and the footer menu
What was a challenge you overcame in this project? Getting the "team photos" section to line up properly was difficult. I also did not figure out how to get the Why? section to line up properly
What concept did you get the most clarity on through Startrly? I think I got more clarity on using grid than anything else in this project.

@kristyh32 kristyh32 changed the title I totally forgot to commit before this point, this is everthing Branches, Kristy Sep 20, 2019
Copy link

@north108 north108 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really great job!! Your code is bone DRY. So impressed, teach me your ways.

font-family: 'Saira Stencil One', cursive;
}

.center{

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love how you created a class for each sections header, this is a great way to DRY your code.

}


hr {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is hr? Is this a way to section things like

?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That didn't print how I expected... I meant: Is this a way to section things like div?

grid-template-columns: 1fr 1fr 1fr
}

.container li {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to get the three Why? reasons to line up and respond appropriately, look into using both grid and flex. Adding a display to .container ul would help, not just to .container li.

display: grid;
grid-template-columns: 1fr 1fr 1fr
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will make the section flexible and then you can go into each li and use grid to get the correct design.

Suggested change
container ul {
display: flex;
justify-content: center;
}

margin: 0;
padding: 0;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then adding a separate .container li and using grid. This is where you can design how the img relates to strong and relates to p.

Suggested change
.container li {
display: grid;
grid-template-columns: (two columns at your choice of size);
grid-template-rows: (two rows at your choice of size);
}

padding: 0;
}

.container li img {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then once your li are grids, then in img, strong, and p you can pick where each lives.

Suggested change
.container li img {
.container li img {
display: grid;
grid-row-start: 1;
grid-row-end: 3;
grid-column: 1;
}

}

h2 {
font-size: xx-large;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't know you could use terms like this for font-size! Definitely going to use this going forward:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants