Max-width does not narrow


#1

Hey, I'm new here.
I've made a website but I want him to be responsive, so I set the div properties with a max-width so he can narrowing on smaller screens.
But it's not working. It's a simple question, but I'm stuck
Here you can find an example
As you can see, when you reduce the width of your browser, the "container" does get narrower, but the "left" and "right" don't.
How come?
And P.S.: sorry for my awful English.


#2

That is not how max-width works, you need @media for that. What exactly are you trying to achieve? Btw, are you dutch?

@media (max-width: 768px){
  /* i only get execute if screen is equal or less then 768px */
}

The problem with max-width is that it only prevents your box from become a bigger then a certain value. It doesn't shrink when the screen gets smaller. What are you trying to achieve?


#3

But why does the "container" do shrink, and the others not?
When I set the max-width with a % instead of px, it also shrinks, (see example), but I would prefer to use px.


#5

And your box can't become bigger then body while being static, so that could also be the reason it shrinking, nothing to do with max-width, and your .left and .right will be shifted below each other


#6

Ok, i understand, but is there a solution to shrink them?


#7

It is not that simple, i recommend to use @media, and then use the values from bootstrap (since someone researched that):

@media (max-width: 768px) {}
@media (min-width: 768) and (max-width: 992px) {}
@media (min-width: 992px) {}

for example if write this:

@media (max-width: 768px) {
  .container {
     background: red;
   }
}

the container will only have a red background when the screen is smaller then 768px. Now, you can use this to have different syntax for different screen sizes. You need this:

<meta name="viewport" content="width=device-width, initial-scale=1">

in your <head></head> since some devices (iphones is one of them) otherwise misbehave. You could read on bootstrap here or MDN about @media

and there is vw (viewport width) and vh (viewport height), you can read about it here