1. 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?

Discussion in 'Styling and Customization Questions' started by estranged, Aug 3, 2013.

  1. estranged

    estranged Well-Known Member

    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.
     
  2. BamaStangGuy

    BamaStangGuy Well-Known Member

    Take away the min-width?
     
    HWS and estranged like this.
  3. erich37

    erich37 Well-Known Member

    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
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  5. erich37

    erich37 Well-Known Member

    hmm.... :confused:

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

    Brogan XenForo Moderator Staff Member

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

    erich37 Well-Known Member

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

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

    Brogan XenForo Moderator Staff Member

    No.
    It has a max width.

    Which the instructions I posted above explain how to do.
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  10. erich37

    erich37 Well-Known Member

    thanks a lot for explanation.

    a screenshot of the proper settings would help a lot....
     
  11. Chris D

    Chris D XenForo Developer Staff Member

    Borgan has explained it very well already.
     
    Shelley likes this.
  12. Brogan

    Brogan XenForo Moderator Staff Member

    I thought the instructions were clear enough.

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

     
    Mike Creuzer and erich37 like this.
  13. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
  14. erich37

    erich37 Well-Known Member

    Thanks!

    you know, a pic says more than thousand words :)
     
  15. Chris D

    Chris D XenForo Developer Staff Member

    Only if you don't take the time to read those words properly, unfortunately.
     
    Autonamus and Martok like this.
  16. oO5 Dynasty

    oO5 Dynasty Active Member


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

Share This Page