'How to avoid re-write style, Responsive Web Design

I use react js

I usually face problem like this

<div style={display: 'flex'}>
   <div>Content 1</div>
   <div>Content 2</div>
   <div>Content 3</div>
</div>

Let's assume above element had styled finished.

Then start to make rwd style

The problem is here.

I usually found that I need added new element to wrap it because I need to make rwd style.

Like this

<div style={display: 'flex'}>
   <div>  // add this element
       <div>Content 1</div>
       <div>Content 2</div>
   </div>
   <div>Content 3</div>
</div>

Then, I need to change style that I had finished, because I added new element.

Do any better way to avoid that?

htmlcssreactjsresponsive-design


Solution 1:[1]

Actually, you can use a tag selector such as div to select all the divs in your document or component in react context. While it is not the best way to handle it will work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AmohPrince

Related Questions