How Do I Move a Component into a Different Div When Viewing on Mobile?-CodePudding

Right now, I have 3 product components in my second home_row div.

const Home = () => {
  return (
    <div className="home">
      <div className="home_container">

        <div className="home_row">
          <Product />
          <Product />
        </div>

        <div className="home_row">
          <Product />
          <Product />
          <Product />
        </div>

        <div className="home_row">
          <Product />
        </div>

      </div>
    </div>
  );
};

export default Home;

When viewing my app on my mobile phone, the third product component in the second home_row div is cut off.

I want to move the third product component into the third home_row div, when the screen width is 450px. Is it possible to tie media queries into this somehow?

CodePudding user response：

You really need to learn FlexBox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This is also a really great resource: https://mastery.games/flexboxzombies/

What you need to do is turn your component from a row-based design to a column-based design.

I have created a codepen for you to understand a little more.

Basically your products i assume (since you haven't given CSS, and your className is called row) are in a row so they go across the page, and when you get into a mobile sized window then your products are too big and get cut off.

So what you need to do is add flex to your classes and switch the design from a row (left-right) flow, to a collumn (up-down) flow.

please see this quick code pen, and then when you resize the page, or click the mobile button the inspector you will see your products will happily fit, and the user can simply scroll down through them:

https://codepen.io/SweetChillyPhilly/pen/eYeMLxq

CodePudding user response：

It's not possible doing this using media queries, because you want to manipulate DOM elements. Look at this code, can help you. I take the width with document.documentElement.clientWidth, and use that like paramenter to decide if the product will appear or not(doing the magic).

     const Home = () => {
             let [screen, setScreen] = useState(0);
        
           function onResiz() {
    let size = document.documentElement.clientWidth;
    

    setScreen(size);
  }
    
      useEffect(() => {
        window.addEventListener("resize", onResiz);
    
        return () => window.removeEventListener("resize", onResiz);
      });
            
              return (
                <div className="home">
                  <div className="home_container">
            
                    <div className="home_row">
                      <Product />
                      <Product />
                    </div>
            
                    <div className="home_row">
                      <Product />
                      <Product />
                      {screen > 450 ? <Product /> : false} //won't show in 450px
                    </div>
            
                    <div className="home_row">
                      <Product />
                      {screen <= 450 ? <Product /> : false} //Only in 450 or less
                    </div>
            
                  </div>
                </div>
              );
            };
            
            export default Home;