Create responsive web page with CSS (need help about page width)

Question

I am trying to create responsive web-page for four sizes of screen (320px, 640px, 980px and 1024px). So when I play around with site size all seems fine, all responsive, but when I make size larger than 1024px, I want to stop any resizing actions and make page look like it looks when size 1024px. I trying to find solution in Internet but I didn't. So can somebody help me? Thanks!

P.S. I found info about using max-width property, but it didnt help. I am using vw units for size definition.

Answer 1

You must use a specific width in px for the page when the width is more than 1024. For example if you have a .container {width:100%;} under the 1024 size, you can add:

    @media screen and (min-width: 1024px) {
.container {
    width:1000px;
}}

When the screen is larger than 1024px your .container still width 1000px.

Answer 2

you can use the viewport meta tag to control your layout.

This article will help you.

https://developers.google.com/speed/docs/insights/ConfigureViewport