CODEWITHSUNDEEP
htmlcssmedia-queries
J. Foe
J. Foe

Reputation: 75

CSS MEDIA QUERY Mobile isnt full width

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: enter image description here

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

Upvotes: 1

Views: 600

Answers (1)

Deadpool
Deadpool

Reputation: 8240

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.

Upvotes: 1

Related Questions