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;
}

CodePudding user response：

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

CodePudding user response：

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"));