XF 1.2 Fixed width and responsive at the same time?

[estranged]

I was using this to make my site fixed width before 1.2

min-width: 976px;
max-width: 1200px;
margin: auto;

Now this seems to break the responsive mode, however the fixed style on this site works fine. What am I missing here?

Thanks.

 

[Brent W]

Take away the min-width?

 

[erich37]

sorry, I still do not understand how to change a "fixed width style" in becoming "responsive".

This is the setting I had with XF 1.1.4


Could you please let me know what I need to change in order to turn my fixed-width-style into "responsive" ?
I am actually using the default XF-style, I have just altered a few colors and some CSS in extra.css for some style-elements.


Appreciate your help!

 

[Paul B]

If responsive design is not working, check the following elements of Style Properties:

• General -> HTML - ensure there is no min-width specified in the Miscellaneous field; if there is, remove it
• General -> Page Width Controller - ensure there is no min-width or width specified in the Miscellaneous field; if there is, change it to max-width
• Responsive Design - ensure Enable responsive design is checked

http://xenforo.com/community/thread...nt-information-and-actions-to-be-taken.56027/

You have a fixed width specified.

 

[erich37]

hmm....

well, I guess I need to define a "fixed-width" somewhere.
Otherwise.... how will it be a "fixed width style" ?

 

[Paul B]

You can't have fixed width and responsive at the same time.

 

[erich37]

I would like to have it the same as at www.cliptheapex.com

It seems it is "fixed" and "responsive" at the same time ?

 

[Paul B]

No.
It has a max width.

Which the instructions I posted above explain how to do.

 

[Chris D]

You're using terms in the wrong way.

Responsive can apply to any style that responds based on the size of the window it is being rendered in. (There's more to it than that, but that's the basic premise).

When a style is responsive, some of the "responses" it can have to things like a window being resized, or loading on a smaller screen would be to hide elements, make elements smaller, make elements bigger. Change the width of elements so they are percentage based rather than fixed etc.

So effectively a responsive design can alter a fixed width style to be fluid -- and vice versa, I guess.

 

[erich37]

thanks a lot for explanation.

a screenshot of the proper settings would help a lot....

 

[Chris D]

Borgan has explained it very well already.

 

[Paul B]

I thought the instructions were clear enough.

It's even mentioned on the page itself:

The width of the page is controlled with this property. Use this to switch between liquid and fixed layouts. To support responsive design, a fixed width value should not be used here; instead, a max-width value should be applied.

 

[Chris D]

Just to add some further context.

In the configuration demonstrated above... max = maximum.

So we're saying the absolute maximum the width of the page can be is 992px;

That means if the screen is less than 992px then it will shrink down. Then responsive design does even more things, as I explained, such as turning the width to 100% (making it fluid) or moving elements or hiding elements.

 

[erich37]

I thought the instructions were clear enough.

Thanks!

you know, a pic says more than thousand words

 

[Chris D]

Only if you don't take the time to read those words properly, unfortunately.

 

[oO5 Dynasty]

I thought the instructions were clear enough.

It's even mentioned on the page itself:
View attachment 53522

Thank you for this, it helped alot. Your really good at this stuff, how did you learn how to do all this?