• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Fixed width and responsive at the same time?

estranged

Well-known member
#1
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.
 

erich37

Well-known member
#3
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!




responsive_fixed_width.gif
 

Brogan

XenForo moderator
Staff member
#4
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

Well-known member
#5
hmm.... :confused:

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

Chris D

XenForo developer
Staff member
#9
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.
 

Brogan

XenForo moderator
Staff member
#12
I thought the instructions were clear enough.

It's even mentioned on the page itself:
upload_2013-8-8_11-13-4.png

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

XenForo developer
Staff member
#13
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.