Kevin Powell - Community•17mo ago

Responsive Header issues

Hi guys , i am new to web dev , and i am just facing a responsiveness problem for my testing header , when i set the mobile view , the header is just messed up and cut off from the right without filling all the browser width. please check the pictures and the appropriate code. N.B : i tested to make the width to 100% in media queries header{ background-color: $color1; display: flex; align-items: center; justify-content: space-between; padding: 10px 3%; min-height: 15vh; position: relative; @include mobile { width: 100vw; }

3 Replies

Jochem•17mo ago

it's backticks, the ones left of 1 on a QWERTY keyboard

Oxymoron.htmlOP•17mo ago

css header{
    background-color: $color1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 3%;
    min-height: 15vh;
    position: relative;

    @include mobile {
        width: 100dvw;
    }

css header{
    background-color: $color1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 3%;
    min-height: 15vh;
    position: relative;

    @include mobile {
        width: 100dvw;
    }

Senra•17mo ago

What html are you using? Try to be more specific when asking questions. Make use of a codepen with a minimal working example so people can help you out

Gaming

Programming

Responsive Header issues