Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
62
Comments
82

Byron

@byronbyronUnited Kingdom2,290 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Rock, Paper, Scissors game using no framework


    Byron•2,290
    Submitted 12 months ago

    0 comments
  • Results summary component


    Byron•2,290
    Submitted about 1 year ago

    1 comment
  • Contact form using jQuery Validation

    #jquery

    Byron•2,290
    Submitted about 1 year ago

    1 comment
  • FAQ accordion using Alpine.js


    Byron•2,290
    Submitted about 1 year ago

    0 comments
  • Interactive comments section using React

    #react

    Byron•2,290
    Submitted about 1 year ago

    0 comments
  • Chat app CSS illustration using HTML and CSS


    Byron•2,290
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • DanielK•440
    @DanK1368
    Submitted about 3 years ago

    Responsive Dropdown Navigation using REACT & Styled Components

    #react#styled-components
    3
    Byron•2,290
    @byronbyron
    Posted about 3 years ago

    @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;
        }
    }
    
    Marked as helpful
  • Chillidot•40
    @Chillidot
    Submitted about 3 years ago

    Interactive rating component mixing CSS grid and flexbox

    1
    Byron•2,290
    @byronbyron
    Posted about 3 years ago

    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!

    Marked as helpful
  • Ujwal Vinay•150
    @ujwalvinay
    Submitted about 3 years ago

    NFT preview card component

    1
    Byron•2,290
    @byronbyron
    Posted about 3 years ago

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

    Marked as helpful
  • Miguel Ruiz•20
    @MikeAngel2
    Submitted about 3 years ago

    Responsive Webpage, using basic Jquery and SASS

    #jquery#sass/scss
    2
    Byron•2,290
    @byronbyron
    Posted about 3 years ago

    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!

    Marked as helpful
  • Abrosss•440
    @Abrosss
    Submitted over 3 years ago

    Random advice API

    2
    Byron•2,290
    @byronbyron
    Posted over 3 years ago

    @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)

    Marked as helpful
  • Ganesh•280
    @Ganesh-Rathor
    Submitted over 3 years ago

    Interactive pricing component using flex css js

    #accessibility
    1
    Byron•2,290
    @byronbyron
    Posted over 3 years ago

    @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 {}
    
    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub