-1

Im trying to make mobile responsive html+css but its not working. No matter what changes I do, nothing happens. What I have tried:

@media only screen and (max-width: 600px) {
  .header {
    width: 100%;
  }
}

Any ideas whats wrong? Example page width is normally 68% and for mobile i change it 100% but nothing happens.

Solution:

have you tried width: 100vw? It could be that the container that holds your container with the class of .header is by himself not long enough, and what you are doing here is saying to make it as big as the parent container. Having more of your HTML and css code would be easier to know what is the issue. So please provide more code if width: 100vw does not work

2
  • have you tried width: 100vw? It could be that the container that holds your container with the class of .header is by himself not long enough, and what you are doing here is saying to make it as big as the parent container. Having more of your HTML and css code would be easier to know what is the issue. So please provide more code if width: 100vw does not work
    – Lith
    Commented Jan 29, 2021 at 21:13
  • I didnt see this first! Yesss, this helps :)
    – Scorpia
    Commented Jan 30, 2021 at 16:23

1 Answer 1

0

It looks like you are missing some curly brackets. Try this:

@media only screen and (max-width: 600px) {
    .header { 
        width: 100%; 
    }
}
1
  • Thanks, that helps. But still there is something going on with width. It not chancing, everything else is, but not width?
    – Scorpia
    Commented Jan 30, 2021 at 16:02

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.