React Responsive Media Queries Not Changing

Question

I'm using react responsive to create media queries so an image size will change. However, it's not doing what I want. It keeps the larger 1st image on the screen and doesn't switch over to the other with the rules I specified. Is there a different way of coding this?

import React, {Component} from 'react'; import MediaQuery from 'react-responsive'

class Name extends Component {

    render(){
        return(
          <>
            <div>
            <MediaQuery Nameimg={this.props.Nameimg} minWidth={900}>
            <img height="15vh" className="name_image" src={this.props.Nameimg} alt="name"/>
            </MediaQuery>
            <MediaQuery Nameimg={this.props.Nameimg} maxWidth={899}>
            <img height="8vh" className="name_image2" src={this.props.Nameimg} alt="name2"/>
            </MediaQuery>
          </div>
          </>
        )
    }
}
  export default Name;

Elizabeth · Accepted Answer · 2021-08-28 17:24:05Z

1

This was a simple fix so hopefully this is useful to someone else as well. But I believe it wasn't working because you need to use set widths defined by the package https://github.com/contra/react-responsive/blob/master/src/mediaQuery.ts#L9

I used minWidth and maxWidth of 1224, which did the trick.

answered Aug 28, 2021 at 17:24

Elizabeth

1571 silver badge16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Responsive Media Queries Not Changing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related