Responsive Layouts

Question 1

By default, are websites static or responsive?

Answer 1

By default, websites are usually responsive. It’s when you come into to CSS with set values, it create issues.

Question 2

Why is it best to work with percentages?

Answer 2

Working with percentages makes the website automatically responsive. It makes creating responsive websites much easier.

Question 3

how does the child interact with the parent element with percentages.

Answer 3

Whatever percentage is set for the parent, the child is the percent of the parent.

For example: You set the parent width as 80%. Then you set the child’s width at 50%. The child is the 50% of the parent’s width. It is NOT 50% of the viewport (window).

Question 4

Why is it a good idea to avoid heights when creating a responsive website?

Answer 4

Using height causes more issues than they solve. Using height causes content to overflow and it’s get hidden. Turning off the height makes it become responsive. It adapts to whatever percentage that you’re working with.

Question 5

If it’s not recommended to use height when working on a responsive site, what alternative that you can use?

Answer 5

If you need more background, use padding. Make sure to use responsive properties such as em or rem.

Question 6

What are media queries and what is the basic syntax?

Answer 6

Media queries let us add new styles that target only specific conditions. Syntax is @media media-type and (media-features) { … }

Question 7

What does this media query telling you?

@media (min-width: 400px) {
    body {
       background: purple;
    }
}

Answer 7

this media query is saying that from a minimum width of 400px and bigger, turn the background color to purple

Question 8

What are the media type that media queries let us target?

Answer 8

• Screen @media screen { … }
• Print @media print { … }
• Speech @media speech { … }

Question 9

When should the media queries come after on the css stylesheet?

Answer 9

Media queries should always come after the DEFAULT selector that you already have.

Question 10

What CSS property can you use to remove the white space on top of a header?

Answer 10

Padding

Question 11

How do you center a menu in a navigation bar?

Answer 11

To center a menu (or list), you can use display: flex, justify-content: center;

Question 12

What is another way that you can center text besides using flexbox?

Answer 12

margin: 0 auto;