Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Lighthouse v9.1.0 - handling images on small devices

I have a text page which displays an image on the left hand side and text on the right hand side.

I have been using HTML to align the image / text and in the past on devices like desktops / laptops / tablets, things have been fine.

Now moving onto mobile phones, what's the best solution to attack this issue?

The HTML script looks something like this ...
<table border="0" cellpadding="0" cellspacing="0" width="100%">

<td align="center" width="30%"> 
<img src="[%GraphicsPath()%]CompanyLogo.jpg" border="0">

<td align="left" width="40%"> 
<font face="Arial">
*** Text goes here ***

<td align="left" width="30%"> 


Looking forward to your reply.
asked Sep 4, 2016 by Paul Moon Platinum (65,230 points)

1 Answer

0 votes
There are multiple options, depending on exactly how you want different size images responding to different size browsers.  The first idea that came to my mind would be to set the maximum width of images to a fraction of the screen width, so no images ever display wider than say 50 percent of the screen.

To do this, start by adding the "imgResize" class to each image, like this:

<img class="imgResize" src="[%GraphicsPath()%]CompanyLogo.jpg" border="0">

Then use this script:

    var screenWidth = SSI_ScreenWidth();
    $('.imgResize').css('max-width', (screenWidth * .50) + 'px');

The ".50" can be updated to change what percentage of the screen width you want images filling up.

Is this solution acceptable for your situation?
answered Sep 4, 2016 by Zachary Platinum Sawtooth Software, Inc. (91,500 points)
If you have tables already in place with widths, couldn't you just tweak the graphic to say width=100% and it would use up whatever space it has?
Perhaps so.  CSS isn't my strong suit.