Media query does not work on non-responsive website

Question

Good afternoon everyone, I put media query css3 to work on a fixed width site, but it doesn’t work. It only works on responsive websites?

http://bblender.com.br/clientes/moldin/

@media only screen and (max-width: 959px) {
.tit-h2{margin-left:2px!important;}
#rodape{
width: 104%;
height: 180px;
background: #F68624;
position: absolute;
bottom: 0;}}

Thank you all.

Answer 1

You must put the METATAG VIEWPORT in the header HEAD page:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

NOTE: You can modify your need by changing the value of the attributes:

• width - Set a width for the viewport. Values can be in PX or "device-width", which automatically determines a value equal to device screen width.

• height - Set a height for the viewport. Values can be in PX or "device-height", which automatically determines a value equal to height of device screen.

• initial-Scale - Sets the viewport’s initial scale.

• user-Scalable - Sets the possibility for the user to "zoom in" a certain place of the screen. It is activated when the user hits two times with your finger in a place on the screen.

With CSS you only define the styles for each resolution.

To METATAG is to inform the device that the width it should use is the width it appears to have, not that of its resolution which is in PIXELS.

You need to use CSS with MEDIA QUERIES and the METATAG VIEWPORT.

I recommend you start working with relative rather than fixed measures to work with responsive layouts as they are more suitable.