SOLVED Responsive image in footer

[ableier]

Hi All,

 

Any idea how to make an image responsive in the footer?  I have added an image to preferences>themes>theme configurator>'Hook" footer.

 

Location is perfect on the desktop, but it is not responsive for mobile.  Any thoughts?

 

Thanks.

Edited July 24, 2015 by ableier (see edit history)

[gr_fenix]

Hi,

You can do it adding this class on the CSS:

.item-img {
height: 100%;
width: 100%;
}

And edit the html, the class of the CSS to a CORRECT responsive tag:
<li class="htmlcontent-item-1 col-lg-12">

[ableier]

Thanks for the insight.  Unfortunately, I'm not sure what html and CSS file to edit.  I looked at themes>footer.tpl and couldn't find anything similar to edit.  Would I add the css to global.css?  I apologize, I don't know what to do!

 

Thank you.

[stoo_s]

I am by no means an expert but this is how I achieved what you're trying to do:

 

1. Resize your image to the size you want it to appear on the full site. For example, if you want it to appear the width of the page then resize the image to 1170px wide. This can be done in photoshop or using free software such as paint.net
2. Upload your resized image to your website and replace your old image with it.
3. In your footer.tpl file change the current code to read <img width="100%;" src="http://fmgweb.com/howardhanna/modules/themeconfigurator/img/9c41208d935d508802ea6dc3d2c53bed49c670a8_home-banner-green-ideas.jpg">

I hope it has the desired result for you!

[ableier]

stoo_s, thanks for the reply.  What code should I change?  I don't see anything about image width in footer.tpl.  Here is the code that I have:

 

{if !isset($content_only) || !$content_only}

</div><!-- #center_column -->

{if isset($right_column_size) && !empty($right_column_size)}

<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>

{/if}

</div><!-- .row -->

</div><!-- #columns -->

</div><!-- .columns-container -->

{if isset($HOOK_FOOTER)}

<!-- Footer -->

<div class="footer-container">

<footer id="footer"  class="container">

<div class="row">{$HOOK_FOOTER}</div>

</footer>

</div><!-- #footer -->

{/if}

</div><!-- #page -->

{/if}

{include file="$tpl_dir./global.tpl"}

</body>

</html>

 

Should I just add that code to a line?  Any clarification would be great.

 

Thank you.

[stoo_s]

I have mine placed between <div class="row">{$HOOK_FOOTER}</div> and </footer>

 

So it should look like this...

 

{if !isset($content_only) || !$content_only}

</div><!-- #center_column -->

{if isset($right_column_size) && !empty($right_column_size)}

<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>

{/if}

</div><!-- .row -->

</div><!-- #columns -->

</div><!-- .columns-container -->

{if isset($HOOK_FOOTER)}

<!-- Footer -->

<div class="footer-container">

<footer id="footer"  class="container">

<div class="row">{$HOOK_FOOTER}</div>

<img width="100%;" src="link to your image">

</footer>

</div><!-- #footer -->

{/if}

</div><!-- #page -->

 

Hope that helps.

 

Stuart