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

XF 1.4 Image : responsive automatic resizing

Discussion in 'Styling and Customization Questions' started by kankan, Feb 3, 2016.

  1. kankan

    kankan Active Member


    I have set an image to illustrate a forum category through Widget Framework HTML :

    2016-02-03 12_42_20-Support Windows 10 _ Le forum des portables Asus.png

    What is the best way to make this image auto responsive on mobile devices ?

    Thanks for your help.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    I don't know how you have added it but in general adding max-width: 100% to the CSS should then cause it to automatically shrink to fit the container as the window width reduces.
  3. kankan

    kankan Active Member

    Hi Brogan,
    I add it in a Widget trough Widge Framework
    I just add width="100%" and it went ok.
    Last edited: Feb 3, 2016
  4. katsulynx

    katsulynx Well-Known Member

    • Your Image does not have the content class, causing the selector “img.content“ not to affect it
    • There is no use in wrapping it in a <center>-tag if you then declare it to float left
    • Width: 100% will never take effect, as you declared it width: auto !important before and important declarations can ponly be overriden by other important declarations - without regarding the fact that declaring the same attribute twice within a single selector is “stupid“ anyway as only one can take effect
    • Remove both width-declarations and replace them with the one from @Brogan, then it will work
    PS: Avoid using !important whereever you can. If your attribute doesn't show any effect, you're likely to have either the wrong or a not precise enough selector.
    kankan likes this.
  5. kankan

    kankan Active Member

    Thanks katsulynx : i just add width="100%" after image src and display is OK :)
  6. Arty

    Arty Well-Known Member

    Don't do that. Setting width to 100% will scale up small images. Instead add style="max-width: 100%;"
    kankan likes this.
  7. kankan

    kankan Active Member

    All is ok :

    Desktop :

    ws 10 _ Le forum des portables Asus.png

    Mobile :

    s portables Asus.png

Share This Page