XF 1.4 Help with html please?

[rwm1962]

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>

 

[Chris D]

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:

https://xenforo.com/community/resources/responsive-design.2193/

 

[rwm1962]

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.

 

[rwm1962]

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