Intermediate CSS - PART II (Media Query Breakpoints, Refactoring, Selectors)

Media Query Breakpoints

This is CSS native functionality.

 

Structure:

@media <type> <feature>

 

This code means that under the condition that max-width is 900px or less apply "h1" color to be "red" by overriding existing color of "h1".

<h1>Hello World</h1>

@media (max-width: 900px){

h1 {
    color: red;
}

}

 

Also multiple conditions can be applied like this.

@media (min-width: 900px) and (max-width: 1000px) {

h1 {
    color: red;
}

}

 

Caution: The order of media matters.

For example, I'd like to change 'title-img' class in different viewport size.

In styles.css file, there is already styled class of 'title-img'.

Therefore, the media query should be located below that styled code.

If you put the media query above it, then it doesn't work.

@media (max-width: 977px) {
    .title-img {
        position:static;
    }
}

And also, it becomes static, now it's in HTML flow.

---

Container VS. Contrainer-fluid

 

from docs:

.container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.

 

Therefore, if you want full width container no matter what viewport is, then choose container-fluid, else use just container.

---

Refactoring

Select class and apply styles with condition

 

#title .container-fluid

means that inside title section with contrainer-fluid will be styled as padding 3% 15% 7% overriding existing container-fluid.

!! Caution !!

the whitespace between #title and .container-fluid should not be stripped.

/* Title Section */
#title {
    background-color: #ff4c68;
    color: white;
}
#title .container-fluid {
    padding: 3% 15% 7%;
}

---

Pick & Mix Selectors

1. Multiple Selectors

selector1, selector2 {
  color: red;
}

---

2. hierarchical Selectors

#title .container-fluid {
    padding: 3% 15% 7%;
}

Spacing is crucial.

---

All the "h1"s on the web page that is the child of an element with the class container-fluid should be colored "red".

---

Here's a question.

Can Hierarchical Selector be applied to the grandchild - grandparent relationship?

: Can't find

---

3. Combined Selectors(multiple conditions as I understand)

class or id

---

More examples

.container .title" VS. ".container.title"

title class that is inside of container class will be styled as follows.

.container .title

title class and container class will be styled as follows.

.container.title

h1 class and id = heading applied colored red

In this case, h1 and class named title are both "Hellow World" and "Bye World"

Since class allows duplicates, not ID.