• 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

kankan

Active member
#1
Hello,

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.
 

Brogan

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

kankan

Active member
#3
Hi Brogan,
Thanks.
I add it in a Widget trough Widge Framework
I just add width="100%" and it went ok.
Thanks
 
Last edited:

katsulynx

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