Fixed to Responsive CSS →

HTML & CSS
1

This is the CSS →

.container{ max-width:1400px; margin:0 auto; clear:both; padding:0 10px;}

The above is very rigid and fixed layout. what If I wish to make it responsive →

.container{ max-width:87%; margin:0 auto; clear:both; padding:0 10px;}

but what still If wish to ensure that maximum width of the container should not exceed 1400px? whats the solution keeping the responsive version.

Or I can write it like this →

.container{ width:87%; max-width:1400px; margin:0 auto; clear:both; padding:0 10px;}

3

Your last option is what I normally do: set a fluid width in percentages, then an absolute max-width. It seems to work very well for me.

4 Likes
4

Both choices are equally “responsive”. Neither is more or less so. The conclusion that the first choice is rigid and fixed is unfounded.

The page in the first choice will start narrowing when the width of the viewport is less than 1400px. There will be no wasted space beside the “page” at narrow widths.

The lower choice will cause the page to start narrowing when the viewport is about 20% wider than the page and will continue to hold that wasted space beside the page. Which means that a person using a tablet may be required to look at a page that is no wider than that which would be shown on a smartphone with no wasted space along the sides.

Both are responsive, though.

2 Likes
5

Few people criticize that Fixed layouts are not responsive. Adaptive Vs Responsive Debate.

6

{max-width:1400px} is not a fixed width. It is a fluid, shrinkable width that can behave responsively or adaptively depending on the layout design. By itself, it’s just fluid, period.

4 Likes
7

I think fluid and fixed layout also depends upon the website requirement. I was able to search this → https://codepen.io/johnstonian/pen/guhid, for example, and it’s sidebar is fixed, but content part is fluid.

Is my understanding correct?

8

What matters is how the page as a whole responds. That is overall a fluid design. Yes, a fluid layout may contain some fixed elements, so long as they are only the minor elements. The page as a whole still squeezes to the screen size.
Then when the fluidity of the page hits the stops and things no longer work well, add a query to alter the layout, like the example.

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.