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
Jochem16mo ago
it's backticks, the ones left of 1 on a QWERTY keyboard
Oxymoron.html
Oxymoron.html16mo 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
Senra16mo 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
Want results from more Discord servers?
Add your server