media queries - rates of change of relative position [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I'm learning CSS fluid layouts & responsive design, and I'm trying to understand how media queries work. Usually, when browsers' widths are resized, widths change relative to the left-hand side of the browser window.

For most sites, if I start with a narrow screen and slowly drag out the browser window to maximum width, as I do so, the left-margin expands relative to the browser width. The rate at which it grows seems to be half the rate I drag out the browser window.

However, I am working with a theme whose left-margin expands at exactly the same rate as the browser window is being dragged out to the right (until the media queries kick in, and then there are the jumps to whatever is being asked for in the query).

I would really like to know how this is achieved, as I would like to control an element within the page with similar queries. I can get it to jump at the correct points, but it moves at a different rate to the standard containers.

Update

Unfortunately, I can't give a simple example. I would like to understand how this works. Starting with a narrow browser window, and slowly dragging the window out to the right, the logo moves to the right at exactly the same rate as the window is being dragged out (until it meets its jumping points). This is what I am trying to reproduce.

Basically, I have some text in the layer slider (which is itself full screen) just below the header section. I can apply media queries to it, but I can't get the text to move inline with the rest of the body.

Answer 1

The header is moving to the right because of this media query

@media only screen and (max-width: 767px) and (min-width: 480px)
.responsive .container {
width: 428px;
margin: 0 auto;
}

and

@media only screen and (max-width: 767px)
 .responsive .container {
    width: 268px;
    margin: 0 auto;
  }

It's reducing the width of the header and making it align to the center using margin: auto;

If you place your slider content within the container (header) then it will resize accordingly if you specify the width of your slider to be 100%. Else you need to change your slider width as in the above code within those blocks.