Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All Comments

  • Solution screenshot
    • HTML
    • CSS
    • JS

    Responsive Dropdown Navigation using REACT & Styled Components

    7
    Byron1,950 | Posted 29 days agocommented on DanielK's "Intro section with dropdown navigation" solution

    @DanK1368 Hia mate.

    Try position: fixed; instead of position: absolute;, to fix the scrolling issue.

    @media screen and (max-width: 670px) {
        .ggprRt {
            /* position: absolute; */
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            transform: translateX(110%);
            opacity: 0;
        }
    }
    
    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Interactive rating component mixing CSS grid and flexbox

    2
    Byron1,950 | Posted about 1 month agocommented on Chillidot's "Interactive rating component" solution

    Hi @Chillidot

    If you remove the height: auto; from the your style.css below, that should fix it in safari!

    /** Circle **/
    svg{
        max-width: 100%;
        /* height: auto; */
    }
    

    Hope that helps!

    1
  • Solution screenshot
    • HTML
    • CSS

    NFT preview card component

    1
    Byron1,950 | Posted about 1 month agocommented on Ujwal Vinay's "NFT preview card component" solution

    Hi @ujwalvinay

    You can put the overlay hover on the image by adding an image wrapper and using a pseudo element, something like:

    <div class="img-wrapper">
        <img src="images/image-equilibrium.jpg" alt="image" id="banner">
    </div>
    
    .img-wrapper {
        position: relative;
    }
    
    .img-wrapper::before {
        content: '';
        background: url('../images/icon-view.svg') center no-repeat hsla(178, 100%, 50%, 0.5);
        display: block;
        border-radius: 1.2rem;
        position: absolute;
        top: 0;
        right: 5%;
        bottom: 0;
        left: 5%;
        z-index: 100;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s;
    }
    
    .img-wrapper:hover::before {
        visibility: visible;
        opacity: 1;
    }
    

    Hope that helps! 👍

    2
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Responsive Webpage, using basic Jquery and SASS

    3
    Byron1,950 | Posted about 1 month agocommented on Miguel Ruiz's "Interactive rating component" solution

    Hi @MikeAngel2

    You should be able to center the second card by updating your index.js to set display flex instead of block.

    $(".Thanks").css('display','flex');
    

    This bit of CSS should help to center the text on the second card as well

    .Thanks {
        align-items: center;
        text-align: center;
    }
    

    Hope that helps!

    2
  • Solution screenshot
    • HTML
    • CSS
    • JS
    • API

    Random advice API

    4
    Byron1,950 | Posted about 2 months agocommented on Abrosss's "Advice generator app" solution

    @Abrosss Looks good!

    Your question is probably one for whoever designed it. I went with a fixed width, but I don't think it matters too much.

    Few html/accessibility issues:

    Your <section class="page"></section> element is probably better off being a <main class="page"></main> (Document should have one main landmark)

    Also need a <h1> element somewhere inside your <section class="container"> (Page should contain a level-one heading)

    2
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Interactive pricing component using flex css js

    1
    Byron1,950 | Posted about 2 months agocommented on Ganesh's "Interactive pricing component" solution

    @Ganesh-Rathor To style range input on chrome/brave (webkit) you can use:

    input[type=range]::-webkit-slider-runnable-track {}
    input[type=range]::-webkit-slider-thumb {}
    
    0
  • Solution screenshot
    • HTML
    • CSS

    CSS Grid layout

    8
    Byron1,950 | Posted about 2 months agocommented on jill pandya's "Single price grid component" solution

    Hey @jillpandya2594, Hopefully this fixes your grid!

    .container {
        margin: auto;
        max-width: 40rem;
        padding: 2em;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    
    main {
        padding: 2em;
        background-color: #fff;
        grid-column: span 2;
        align-self: flex-end;
    }
    
    section {
        display: flex;
        flex-direction: column;
        padding: 2em;
        background-color: hsl(179, 62%, 43%);
    }
    
    aside {
        padding: 2em;
        background-color: hsl(180, 62%, 47%);
        line-height: 1.6;
    }
    
    1
  • Solution screenshot
    • HTML
    • CSS

    QR code component

    2
    Byron1,950 | Posted about 2 months agocommented on Nelson Rosario's "QR code component" solution

    Nice job @NellyisDevv

    I would avoid using the <center> tag as it's well out of date, and no longer recommended.

    To display your QR code a tiny bit better on really small screen widths (around 320px) I would do something like this:

    .qr-container-background {
        background-color: var(--White-);
        padding: 20px;
        border-radius: 20px;
        max-width: 320px; /* Set max width of card */
        width: 100%; /* Full width up until 320px */
    }
    
    .qr-container-photo img {
        border-radius: 10px;
        width: 100%; /* Set image to fill width of the container */
        height: auto;
    }
    

    For a small project like this, I think your CSS file set up is absolutely fine!

    Also, you've got a few Accessibility/Html issues that you could resolve for a perfect score.

    0
  • Solution screenshot
    • HTML
    • CSS

    Order Component Using HTML CSS and Flexbox

    4
    Byron1,950 | Posted about 2 months agocommented on Dizzy_Sloth's "Order summary component" solution

    Hey @TotallySly, it looks alright!

    For the button hover, I used a slight opacity instead of the background colour, something like:

    .payment--container button:hover,
    .payment--container button:focus {
        opacity: 0.75;
    }
    

    For the sizing thing, it depends on how picky your client is in the real world 😅. When I want to get the image size from the design image, I usually open it up in Preview (mac) and drag a square around the image to get the dimensions.

    For your Order Component, it looks like your background images aren't coming through. Something like this should help I think (feel free to play around with the background-size values):

    body {
        ...
        background: url(images/pattern-background-mobile.svg) no-repeat, top center hsl(225, 100%, 94%);
        background-size: 100% 194px;
    }
    
    @media screen and (min-width: 908px) {
        body {
            background-image: url(images/pattern-background-desktop.svg);
            background-size: contain;
        }
    
    1
  • Solution screenshot
    • HTML
    • CSS

    Fylo Landing Page Built with HTML, CSS and Bootstrap

    4
    Byron1,950 | Posted 2 months agocommented on Emmanuel Oloke's "Fylo landing page with two column layout" solution

    @EmmanuelOloke Looks good!

    Your <section> elements ideally need a heading tag inside them somewhere 👍

    That's my 5 pence 😅

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Todo App with SASS/vanilla JS + added search function

    5
    Byron1,950 | Posted 2 months agocommented on DanielK's "Todo app" solution

    @DanK1368 Looks good!

    1. background-image: url(../../assets/icon-check.svg); will get you the checkbox!
    2. It sounds like your todo ids aren't correctly being set. I had a similar problem and solved it by using SortableJS and nanoid
    0
  • Solution screenshot
    • HTML
    • CSS

    Qr code HTML/CSS flexbox

    4
    Byron1,950 | Posted 2 months agocommented on Adam M's "QR code component" solution

    @AdamMzkr Looks great!

    Just missing a <main> tag, that's all.

    Nice job 👍

    0
  • Solution screenshot
    • HTML
    • CSS

    My first challenge completed using just HTML and CSS (Flexbox)

    2
    Byron1,950 | Posted 3 months agocommented on Jean Ruiz's "QR code component" solution

    Really solid job @Jean-FrontEnd! Only thing I can say is to check your accessibility issues flagged by FE mentor.

    I think it’s just a <main> and <h1> that’s missing. Other than that, it’s spot on 👍

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Pricing component with toggle challenge hub

    1
    Byron1,950 | Posted 3 months agocommented on Maciej Marchewka's "Pricing component with toggle" solution

    Hey @dreamspice your BEM classes don’t look too bad at all! The main point is that you’ve picked a convention and stuck to it. 👍

    0
  • Solution screenshot
    • HTML
    • CSS

    NFTchallenge with CSS custom properties and Flexbox

    2
    Byron1,950 | Posted 4 months agocommented on Christ Kevin Touga Watat's "NFT preview card component" solution

    Not bad @Christ-Kevin

    I'd suggest having a look at the accessibility/html issues flagged by the FE mentor report 👍

    • All page content should be contained by landmarks
    • Bad value auto for attribute height on element img: Expected a digit but saw auto instead.
    • Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
    • etc.

    Other than that looks good! The massive height is a new one as well 😆

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Social media dashboard with theme switcher

    2
    Byron1,950 | Posted 4 months agocommented on Reandyx's "Social media dashboard with theme switcher" solution

    Hi @Reandyx

    Looks really good!

    Few accessibility issues flagged the FE Mentor report:

    • Heading levels should only increase by one
    • Document should have one main landmark

    Both should be fairly easy to fix by making sure your heading start at <h1> and continue in order. The second issue can be fixed by wrapping all the content in a <main> tag.

    Your transitions when the theme switches are brilliant!

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Social Media Dashboard with Theme Switcher

    1
    Byron1,950 | Posted 4 months agocommented on Ashraf Awad's "Social media dashboard with theme switcher" solution

    Hi @Ashraf-7

    Looks like you've got a few issues flagged by FE Mentor's report thingy:

    • Buttons must have discernible text
    • Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

    Other than those, it looks good 👍

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS
    • API

    URL shortening API landing page with Vanilla Js

    4
    Byron1,950 | Posted 4 months agocommented on Tadeu Barbosa's "URL shortening API landing page" solution

    Hi @tadeubdev

    Your footer links look like they’re off centre slightly to the right on mobile.

    Also a few accessibly/html issues flagged by FE Mentor.

    Really nice work 👍

    1
  • Solution screenshot
    • HTML
    • CSS

    Social proof section with HTML & CSS

    2
    Byron1,950 | Posted 4 months agocommented on camilla naomy tsuda's "Social proof section" solution

    Hi @naomy19

    It looks very nice!

    Couple of small suggestions as per the issues FE Mentor has flagged:

    • Headings should ideally be in order h1, h2 etc. You have a h1 followed by h4s.
    • There should ideally be a <main> element wrapping the content as well.

    Great work 👏

    0
  • Solution screenshot
    • HTML
    • CSS

    order-summary-component

    4
    Byron1,950 | Posted 4 months agocommented on Sara Ferreira's "Order summary component" solution

    Hi @saraferreira10

    Looks great!

    The frontend mentor report thingy is flagging a couple of issues, both I think can be easily fixed by using a <main> tag. e.g.

    <main class="container">
        ...
    </main>
    

    Nice work! 👍

    1
  • Solution screenshot
    • HTML
    • CSS

    3 column preview card component

    1
    Byron1,950 | Posted 4 months agocommented on Jonathan's "3-column preview card component" solution

    Hi @jonathan401

    Try this for the body:

    body {
        min-height: 100vh; /* min-height instead of height */
        padding: 88px 1rem; /* a bit of spacing above and below for mobile */
        font-family: sans-serif;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    

    for the rounded corners on mobile:

    .card-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        overflow-x: hidden;
        border-radius: 9px;
        max-width: 300px; /* Add the max-width here */
    }
    
    /* then remove the max-width on screens larger than 992px */
    @media (min-width: 992px) {
        .card-wrapper {
            max-width: none;
        }
    }
    
    1
  • Solution screenshot
    • HTML
    • CSS

    stats-preview-card-component using Flexbox

    2
    Byron1,950 | Posted 4 months agocommented on Daniel Alejandro Leon Ortiz's "Stats preview card component" solution

    The background was a right pain on this one! It might be overkill, but I managed to get really close with this:

    .card-image {
        background: url(images/image-header-mobile.jpg) no-repeat center var(--soft-violet);
        background-size: cover;
        background-blend-mode: multiply;
        width: 327px;
        height: 240px;
        position: relative;
        opacity: 0.75;
    }
    
    .card::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 327px;
        height: 240px;
        background-color: hsl(277deg 64% 61%);
    }
    

    The image is a background-image with background-blend-mode: multiply; with a touch of opacity (0.75). Then behind that, I put a purple background pseudo element.

    0