×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 34 – Adding CSS Media Queries for React

    Lesson List
    [ Adding CSS Media Queries for React, 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.

    src/Person/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.

    src/Person/Person.css
    
    .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.


    In Case Pervious Lesson Skipped:
    This will only work if you have enabled the CSS module for the application
    You can find here : Enable and Use CSS Modules In React
    React introduction
    React Component
    Adding CSS Media Queries for React

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept