WordPress.org

1. TennisMatt
   Member
   Posted 8 months ago #

   Hi

   I have been using WP for about 2 months now, but cannot find a way of solving this one, so any help would be very much appreciated, thanks.

   I am using twentyeleven child and have customised my footer and inserted a 1000px wide image. However when the screen becomes smaller, it does not resize the footer image (the rest of the footer resizes!). I have the mobile plugin so it all resizes for phones etc, but still the footer image stays large and flies off the right.

   My website is http://www.icanplaytennis.net

   and my footer.php in child theme contains:

   [Code moderated as per the Forum Rules. Please use the pastebin]

   Many thanks
   Matt

2. alchymyth
   The Sweeper
   Posted 8 months ago #

   try and add a css class to the image tag, and add a corresponding style at the end of style.css in your child theme;

   example:

   <img class="footer-image" src="http://....els.jpg" alt="grass_1000pixels.jpg">

   img.footer-image { width:100%;height: auto; }

3. TennisMatt
   Member
   Posted 8 months ago #

   Hi Alchymyth

   many thanks for the quick response, I really wasn't expecting anything so soon!

   I tried as you suggested, and also changed the width to auto, but I'm still having the same problem.

   I put all the code in my style sheet, is that correct?

   thanks again
   Matt

4. alchymyth
   The Sweeper
   Posted 8 months ago #

   a:
   the bottom of style.css of your child theme is broken because there is html code added;

   <img class="footer-image" src="http://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg"
   alt="grass_1000pixels.jpg">
   
   img.footer-image { width: auto;height: auto; }
   
   #page {margin-bottom:0;}

   remove that part:

   <img class="footer-image" src="http://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg"
   alt="grass_1000pixels.jpg">

   (html is not allowed in a stylesheet)

   b:
   please use: width: 100%; as i suggested.

   c:
   you also need to edit footer.php and add the css class into the image tag;
   change from:
   <img src="http://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg" alt="grass_1000pixels.jpg">
   to:
   

   <img class="footer-image" src="http://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg"
   alt="grass_1000pixels.jpg">

5. TennisMatt
   Member
   Posted 8 months ago #

   Alchymyth you are a star

   Thank you so much. It works perfectly now, and thank you for the explanation of why as well, it really helps further my understanding/ learning :)

   many thanks
   Matt

Reply

You must log in to post.