HTML, CSS, JavaScript

Community feedback

• 

  Gabriel Morandi de Mello•450

  @gabrielmorandiPosted over 1 year ago

  Hi @BayoOtomuola 👋, great job on your news homepage! The layout looks clean and the design is visually appealing. I have a few suggestions that could improve your code and make your page even better:

  • Consider separating the CSS for the mobile and desktop versions of your site using media queries. This will make it easier to maintain and update your styles in the future.

  • In your CSS, you have some font sizes specified using rem and others using px. It's a good idea to stick with one unit, preferably rem, for better responsiveness and consistency across different devices.

  Here's an example of how you could update your code with these suggestions:

  /* Add this media query to separate mobile and desktop styles */
  @media (max-width: 575px) {
      /* Add mobile-specific styles here */
      body {
          font-size: 15px;
      }
  
      #web3-img {
          width: 445px;
      }
  
      /* Add other mobile-specific styles */
  }
  
  /* Move your existing CSS rules here and update the font sizes to use rem */
  body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      overflow-x: hidden;
  }
  
  #web3-img {
      width: 28rem;
  }
  
  /* Update other CSS rules to use rem */
  

  I understand that you are experiencing problems with horizontal scrolling in the mobile layout of your project. Here is a suggestion to resolve this issue:

  • Add 'box-sizing: border-box;' to the beginning of your CSS file to avoid element width issues with padding and borders:

  * {
    box-sizing: border-box;
  }
  

  • In your CSS file, in the media query (min-width:576px), you defined .second-section-text with display: flex; and flex-direction: row;. This can cause horizontal scrolling in the mobile layout. To fix this, you can add a mobile-specific media query and set the flex direction for column. Add this code snippet to your CSS file:

  @media (max-width:575px) {
    .second-section-text {
      display: flex;
      flex-direction: column;
    }
  }
  

  • Your .third-section is with width: 600px. Try changing using media queries.

  • Check for other elements that may be causing horizontal scrolling and adjust them as needed.

  I hope these suggestions help you improve your project. Keep up the good work, and happy coding! 😄

  1

  ---

  

  Adebayo•60

  @BayoOtomuolaPosted over 1 year ago

  @gabrielmorandi thank you very much for this feedback i do appreciate it, i will work on it.

  1