React JS how to have a component moving to next row when window is getting smaller

user_9481523 0
Viewed 275

In my product detail page, There are two components - an image gallery on the left and product information on the right. I want the product information component move to next row when the window is getting smaller. I tried difference css styles and fail to make it work. When the window get smaller, the two components still stay on the same row. and make the image gallery too small to display:

Below is my current code, DetailProdcut.js

import React, { useEffect, useState } from 'react';
import ProductImages from './ProductImages';
import ProductInfo from './ProductInfo';
import {productItems} from '../Data';
import { useParams } from 'react-router-dom';
import './DetailProductPage.css';


function DetailProductPage() {

    const { id }=useParams();
    const [details, setDetails]=useState([])
    
    useEffect(() => {
        setDetails(productItems.find(item => String(item.id) ===id ))
    
     }, [id]);
        
    return (
        <div className="postPage" style={{width:'100%', padding: '5rem 3rem'}}>

        <div className="detailInfo">
          <div className="detailLeft">
               <ProductImages detail={details} />
           </div>

           <div className="detailRight">
               <ProductInfo  detail={details} />
           </div>
        </div>
      </div>
  )
}

export default DetailProductPage

DetailProduct.css


.detailInfo{
  display: flex;
  /* justify-content: space-between; */
  margin-left: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
  max-width: 1500px;
  background-color: white;
  flex-wrap: wrap;
  width: 100%;
}

.detailLeft {
  flex:2;
  max-width: 850px;
  height:auto;
  width: auto;
  margin-right: 30x;
  margin-left: 10px;
  margin-top: 30px;
  padding-right: 20px;
  
}

.detailRight{
  flex:1;
  width: 40%;
  height:auto;
  margin-left: 60px;
  margin-right: 30px;
  margin-top: 15px;
  padding-right: 25px;
  padding-left: 25px;
}
reactjs css
2 Answers

Try using @media screen of css, it can solve your issue

user_95391930

Try to use window innerWidth for screen size check. You can refer below example for more info. enter link description here

class WindowWidth extends React.Component {
  constructor() {
    super();
    this.state = { 
      height: window.innerHeight, 
      width: window.innerWidth
    };
    this.updateDimensions = this.updateDimensions.bind(this);
  }
  componentDidMount() {
    console.log(this.state.height);
    // Additionally I could have just used an arrow function for the binding `this` to the component...
    window.addEventListener("resize", this.updateDimensions);
  }
  updateDimensions() {
    this.setState({
      height: window.innerHeight, 
      width: window.innerWidth
    });
  }
  render() {
    return (
      <h3>
        Window width: {this.state.width} and height: {this.state.height}
      </h3>
    );
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  }
}

ReactDOM.render(<WindowWidth />, document.querySelector(".root"));
user_185415380
Related