CSS MEDIA QUERY Mobile isnt full width

Question

im trying to get my website to fullscreen on mobile phones, but somehow it wont be, unless if i zoom out on phone. i want it to be fullscreen at start and not for me to do it manually to be at fullscreen. i have tried:

      @media screen and (max-width: 800px) {
  .headHolder .invertText .sk-notouch .template .content-bgr-light .sk-body-admin .sk-em-standard .aa_top_menu_body{
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }

it doesnt work, does anyone have any idea?

image:

on image you can see that there is more content on the right.

Answer 1

Add this to your code:

  @media screen and (max-width: 800px) {
    .headHolder .invertText .sk-notouch .template 
    .content-bgr-light .sk-body-admin .sk-em-standard .aa_top_menu_body{
  width: 100%;
  min-width: 100%;
  margin:0;
  box-sizing: border-box;
}

Then, again go to your chrome-dev and check that the CSS that you have written is getting applied or NOT. There are so many classes in between that if you have messed up chronology of even 1, this might not be getting applied as such...and you are thinking, your CSS is not working, So double, check that out, in inspect-element window.