HTML, CSS, JavaScript

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! 😄