PS default theme images in Theme Configurator not resizing on mobile

[apawsomelife]

Hi, this is my website in development, I can't for the life of me figure out what's going wrong.

 

http://apawsomelife.pswebstore.com/en/

 

I removed the image slider and replaced it with 2 images side by side. This is what I have for hooks.css

/* Home hook CSS */
#htmlcontent_home ul {
  margin: 0 -5px; }
  #htmlcontent_home ul li {
    padding: 0 5px 10px; }
    @media (max-width: 479px) {
      #htmlcontent_home ul li {
        width: 100%; } }
    #htmlcontent_home ul li img {
      max-width: 100%;
      height: auto; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li img {
          min-width: 100%; } }
    #htmlcontent_home ul li.htmlcontent-item-5 {
      width: 66.6667%; }
      @media (max-width: 479px) {
        #htmlcontent_home ul li.htmlcontent-item-5 {
          width: 100%; } }

/* Top hook CSS */
#htmlcontent_home ul { 
width: auto;
}
  #htmlcontent_home ul li {
    width: 66.67%;
    height: auto; }
    @media (min-width: 1200px) {
      #htmlcontent_home ul li {
        max-width: 100%;
	width: 33.33%;
    height: auto; } }
    @media (max-width: 400px) {
      #htmlcontent_home ul li {
	width: 200px;
    height: auto; } }
    #htmlcontent_home ul li img {
      max-width: 100%;
      width: 66.67%;
    height: auto; }
      @media (min-width: 1200px) {
        #htmlcontent_home ul li img {
          max-width: 100%;
	  width: 66.67%;
    height: auto; } }

/* Left hook CSS */
/* Right hook CSS */
/* Footer hook CSS */

Though it looks fine on PC

 

 

the images are not getting resized on mobile and are overlapping

 

 

Thank you in advance

[dioniz]

Try to add img-responsive class to images and see what happens.

[apawsomelife]

Thanks dioniz, the images however are added via theme configurator, not sure where I can add in the img-responsive class.

 

Do I need to change the tpl for theme configurator?

 

EDIT: I changed the hook.tpl under /modules/themeconfigurator/views/templates/hook

 

from

{if $hItem.image}
	<img src="{$link->getMediaLink("`$module_dir`img/`$hItem.image`")}" class="item-img {if $hook == 'left' || $hook == 'right'}img-responsive{/if}" title="{$hItem.title|escape:'htmlall':'UTF-8'}" alt="{$hItem.title|escape:'htmlall':'UTF-8'}" width="{if $hItem.image_w}{$hItem.image_w|intval}{else}100%{/if}" height="{if $hItem.image_h}{$hItem.image_h|intval}{else}100%{/if}"/>

to

{if $hItem.image}
	<img src="{$link->getMediaLink("`$module_dir`img/`$hItem.image`")}" class="item-img img-responsive" title="{$hItem.title|escape:'htmlall':'UTF-8'}" alt="{$hItem.title|escape:'htmlall':'UTF-8'}" width="{if $hItem.image_w}{$hItem.image_w|intval}{else}100%{/if}" height="{if $hItem.image_h}{$hItem.image_h|intval}{else}100%{/if}"/>

No difference. Any ideas?

Edited March 16, 2015 by apawsomelife (see edit history)

[apawsomelife]

I'm not sure what I did but somehow I fixed it. Thanks!