Media Query Breakpoints

Why should you care about making your websites responsive?

Around October 2016, the number of people who browse the web on mobile devices overtook the amount of people who browse the web on computers.

Mobile friendliness affects your Google search rankings. You can use Google’s Mobile-Friendly Test website to check the effectiveness of your responsive web design (https://search.google.com/test/mobile-friendly)

What are your options?

1. Do Nothing
2. Make a Separate Mobile Site (ex. Facebook)
3. Make Your Main Website Responsive (My Suggestion)

Media Queries

We use CSS Media Queries to make our websites responsive. There are many different media queries that only run under specific conditions. For example,

@media print {
   h1 {
      color: red;
   }
}

If our website is under the condition of being printed, then this condition will be true and it will apply these styles to the h1 elements on our page.

Some other examples:

@media screen (Dependent on the screen size or screen resolution)

@media speech (Will be activated if the website is being read to a person, such as a visually impaired person)

This is the format for media queries:

@media <type><feature>

For example:

@media screen (min-width: 900px) {
   // Change something
}

Wrapping Flexbox with Media Query

.info {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .info-img, .info-text {
    min-width: 100%;
    text-align: center;
  }
}