Making images Responsive to Template

Permalink Browser Info Environment
Using your theme to create some landing pages and would like to know what code will work in the highlighted area to make the image responsive yet stay within the parameters of the theme.

With no images on the site it wraps perfect to every device I have. But, when I add images it wraps to their size. I discovered that I needed to change the code to make them fit 100% and did get them to be responsive but they fit the size of the device and the footer and copy reduce size and are not readable.

I've found various code scenarios through help desks but none of them exactly work the way they should.

How do I get the image to be the same width as the footer on any device? Image "Screen Shot 2016-01-04 at 12.45.31 PM" indicates where I would like to put the code. It doesn't show it now but at one point did define height and width.

What I want to know is what can I add, see below? Not a coder so trying to do this within the confines of the CMS.

<h2><img src="/index.php/download_file/view_inline/4/" alt="6d584181b9b45524fcba267c6778d964_f169.jpg" INSERT YOUR ANSWER HERE /></h2>

Thanks

3 Attachments

Type: Pre-Sale
Status: Resolved
brandscapes
View Replies:
datasouth replied on at Permalink Reply
datasouth
Hi,

Try this:

<h2><img src="/index.php/download_file/view_inline/4/" alt="6d584181b9b45524fcba267c6778d964_f169.jpg" style="max-width:100%;" /></h2>

I hope this fixes your problem.

Regards.

concrete5 Environment Information

# concrete5 Version
5.6.3.4

# concrete5 Packages
Bootswatch (0.9.1), Casual Theme (0.9.5), Facebook Like Button (1.1), tnSpacer (1.3).

# concrete5 Overrides
languages/ar, languages/pt_BR, languages/da_DK, languages/nl_NL, languages/de_DE, languages/sk_SK, languages/el_GR, languages/ro_RO, languages/ja_JP, languages/tr_TR, languages/it_IT, languages/ru_RU, languages/nb_NO, languages/cs_CZ, languages/sl_SI, languages/pl_PL, languages/fi_FI, languages/fa_IR, languages/sv_SE, languages/es_MX, languages/es_PE, languages/zh_TW, languages/es_AR, languages/pt_PT, languages/es_ES, languages/vi_VN, languages/fr_FR

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.5.30

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, intl, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_pgsql, pdo_sqlite, pgsql, Phar, posix, readline, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, Zend Guard Loader, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 300
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 10000
memory_limit - 256M
post_max_size - 128M
sql.safe_mode - Off
upload_max_filesize - 128M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - nocache
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 2000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5
zend_optimizerplus.max_accelerated_files - 2000
zend_optimizerplus.max_file_size - 0
zend_optimizerplus.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.