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

Community feedback

• 

  Ngouend raoul Gerard•560

  @BeinRain06Posted over 1 year ago

  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

  Marked as helpful

  0
• 

  Ngouend raoul Gerard•560

  @BeinRain06Posted over 1 year ago

  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="general_wrapper">
  

        <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

  1

  ---

  

  Paras Sharma•700

  @imparassharmaPosted over 1 year ago

  @BeinRain06 first of all thankyou for taking your time out and coming forward to help me but there is some confusion here. As in my title I have not done mobile compatibility yet. Its desktop compatible only.

  And by including style.css in main.js file you mean inline css?

  0