Skip to content
OverviewSolutions
2
Comments
2

Md. Fardin Khan

@KPorusDhaka20 points

Hi, Passionate web developer with expertise in Next.js, React, Node.js, and databases. Skilled in design with Figma and Adobe tools.

Latest solutions

  • Blog Preview Card Solution

    #bem
    Md. Fardin Khan•20
    Submitted 5 months ago
    1 comment

  • Responsive QR Code Card with HTML & CSS

    #bem
    Md. Fardin Khan•20
    Submitted 5 months ago

    Areas Where I Would Like Help:

    • CSS Optimization: Would appreciate feedback on how to make the CSS more efficient, especially for responsiveness and maintainability.
    • Accessibility Improvements: Seeking advice on best practices for improving accessibility, such as enhancing color contrast and adding proper alt text for images.
    • Deployment Process: Any tips on improving the deployment workflow or additional optimizations for GitHub Pages.
    1 comment

Latest comments

  • Md. Fardin Khan•20
    @KPorus

    Your card doesn't have the correct padding; it seems there might be some tag overwriting the styles.

  • Md. Fardin Khan•20
    @KPorus

    Issue: As per the design, there was an issue where the background color didn't cover the full screen. The problem occurs because the body does not extend to the full height of the viewport.

    Solution: To fix the issue, you can ensure that both the html and body elements take up the full height of the screen by adding the following CSS:

    html, body {
    height: 100%; 
    margin: 0;
}

    After this update, the background color (--light-gray) will cover the full screen, as expected.

    Final CSS:

    html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--light-gray); 
    font-size: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

    While fixing the full-screen background issue, this keeps the body CSS as you requested. Let me know if this works for you! 🚀