I'm having trouble with the responsiveness of my project

In this project, I’m using react and sass, but the styles for mobile seems off, here is a picture, I think the navbar is the problem but I can’t figure what is happening in the inspector.

and here is the GitHub repo https://github.com/Ceci007/creative-react-sass

I already spend 24 hours just in the hero styles and I can’t find what’s wrong with the styles, I’m using media queries and css grid… please help :’(

oh I solved!, I just added : :yum:

.navbar {
    @media only screen and (max-width: $bp-large) {
        display: flex;
    }
}

.navbar-white {
    @media only screen and (max-width: $bp-large) {
        display: flex;
    }
}

it seems to work with a little of flexbox combined with CSS grid.

1 Like