React App. Not mobile compatible yet. Some queries on paddings.

Your are welcome, @imparassharma You can link css file in your main.js file of react not do an inline-css. Here above is what I'm suggesting :

create a file called style.css in the same directory that your main.js file

Add some style in this css file. Now to link it to your main.js file: --> open your main.js* file and Write this line at the top :

import "./style.css"

And see if it works to implement your style written on this later file.

Hope that make sense if some issue appears again could leave me some brief explanation I will try to lead my answer through the best I could. Having this nice journey, I'm just keep saying happy coding to you @imparassharma

Hello @imparassharma I have seen your mobile app. But what I wondering why, you didn't use style.css file to style the whole main.js file

But my quick way to see to correct each section is in mobile to stack the section Stay updated over the section with big image.

For e.g I think you might do something like that :

      <div class="section-one padding-effect">
        <div class = "content-section-one">
          ... // some syntax section one
        </div>
     </div>
     <div class="section-two padding-effect">
       <div class = "content-section-two">
        ... // some syntax section two
       </div>
      </div>

And in style.css try this along or either with your javacsript code:

.general_wrapper {

   width: 100vw;
         ... 
}

.padding-effect {
   width: calc (100%  - 1em)
   margin: 0 auto;
     ... 
   
  }

To make the padding of 1em each time in mobile. Instead using rem units you might use em units in mobile but not in desktop because it become quite large due to the fact that em unit is calculated according to the direct parent element with that grows bigger in desktop style.

Hope you might have a solution to fix the displaying, and also have a nice day /night@imparassharma