34 – Adding CSS Media Queries for React

In the last lesson we learn how to use pseudo elementsor pseudo selectors and how we may even nest classes and still import them on that class object. Now want to take care about the media queries.

CSS Media Queries for React

We will add some media queries and that was somthing I wanted to do in my .Person class in Person.js.

import React from 'react';
import PersonClasses from './Person.css';
const person = props => {
	return (
		<div className={PersonClasses.Person}>
			...
		</div>
	);
};
export default person;

So lets now add some Media queries in our Person.css file.

.Person {
	width: 60%;
	margin: 16px auto;
	border: 1px solid #eee;
	box-shadow: 0 2px 3px #ccc;
	padding: 16px;
	text-align: center;
}

@media (min-width: 500px) {
	.Person {
		width: 450px;
	}
}

The media query will just adjust our .Person class the width: 450px if we have a view port being broder the 500px.
We can save this adjusted CSS file and it will still import this peron class fine on the PersonClasses in Person.js even if it is wrapped inside a media query.
Now just simply save the file and adjust the width to see the .Person is been adjusted based on screen width.

React introduction
React Component