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

XF 1.4 Help with html please?

Discussion in 'Styling and Customization Questions' started by rwm1962, Jun 29, 2015.

  1. rwm1962

    rwm1962 Active Member

    I feature an image & paragraph of text for each of my primary nodes. I'm also using the [rellect] Nodes Grid addon. The question relates to general html coding rather than this add-on specifically as same could happen without it if the image was big enough

    Looks great (IMO) on a monitor & also on a smart phones where the images disappear - also tidy.

    Normal monitor view:


    However on a tablet the text starts to wrap & it doesn't look good:


    I can force it via the ACP to drop the images for tablets but I'd prefer them to stay. Is there any way of coding the html so that if it needs to wrap, ALL words wrap?

    Sample of code I'm using for a forum description:

    <p><a href="http://mydomain.com/index.php?forums/fettling-forum.290/"><img alt="Fettling Forum" src="http://www.mydomain.com/custom_images/fettle.jpg"  style="margin-right: 15px" style="margin-bottom 10px" align="left" border="0" /></a>Fettle = to fix, repair. The place to ask for &amp; give advice on stove repair &amp; maintenance. Featuring <a href="http://mydomain.com/index.php?forums/fettlers-master-class.29/">The Fettlers Masterclass</a> section &amp; <a href="http://mydomain.com/index.php?forums/stove-decals.451/">Stove Decal Gallery</a></p>
  2. Chris D

    Chris D XenForo Developer Staff Member

    Rather than defining the CSS in the style attributes, you ought to be using CSS class names, and then applying styling to those classes in CSS. This then allows you to use things like media queries.

    What you could do is when a certain max-width is reached, set the image width to max-width: 100px (or similar) which would make it shrink as the display width gets narrower.

    There's plenty of examples of media queries in the existing XF CSS, already.

    A good tip to find some examples would be to search templates for titles containing ".css" and template text that contains "enableResponsive".

    With that you should be able to find a few examples of CSS that only applies when certain max widths are met. This guide is also useful:

    rwm1962 likes this.
  3. rwm1962

    rwm1962 Active Member

    Thanks Chris - with my level of knowledge answers I can barely comprehend were always a risk! ;)

    I'll take a gander. It's good to know it's possible.
  4. rwm1962

    rwm1962 Active Member

    The problem I have is if the image shrinks responsively the text still wraps - even more so. I'd like the images to stay the same size for tablet but I'm wanting the full description to stay to the right of the image until the screen get down to a certain size & then for the whole description to drop below the image. The images disappearing altogether at even smaller size eg phone is fine

Share This Page