Showing results for 
Search instead for 
Did you mean: 

Home Page images not working with RWD.

Home Page images not working with RWD.

I've been working for a little while getting the basic back end side of things working with Magento in terms of being able to get the navigation how I want it etc.


I'm now at the stage of trying to make the site look nicer etc. and I'm having issues with images on the Home Page.


I've tried adding the image via the Page Edit setup and by creating a CMS block and adding that to the page through the Widget function in the WYSIWYG.


In both instances the picture does not scale down when the site is viewed on mobile.


Everything else such as headers on the product category pages (added by uploading them through the image button on the category page) and the product images themselves work fine it's purely when I try to add them separately.


We sell car parts so ideally I'd be looking at something like


Main Category has the badges of the Makes we deal in, then the sub category has an image of the cars you click on, but as I can't get images in and have them scale I can't do that so far.


At this stage I'd just settle for being able to have at least one images on the Home Page as a starting point. 


Hopefully that makes sense and there is a simple solution to this and I'm missing something really basic?


Re: Home Page images not working with RWD.

For images to scale appropriately you need to make sure that they have right style; either by class or by style element. Look here for more information:

Tanel Raja

Re: Home Page images not working with RWD.

I understand that partly.


I'm fine with the basics of working with HTML and CSS in a non Magento context just in terms of creating a basic website. Magento is pretty much completely new to me though.


It's applying that in Magento that I can't figure out.


What I've been doing ls CMS > Pages > home, then in WYSIWYG adding the image which is already uploaded to the Media library in Magento.


Besides the traditional image options like fixing the size in pixel, options for on mouse over etc. I have nothing avilable to me to allow applying max-width.


Do I need to create an entire new home page and setup CSS for it just to display an image on the home page? I perhaps wrongly assumed that as the site is setup with the base RWD them that by just using the WYSIWYG and then putting the image on the page that should be taken care of automatically?


TLDR: I understand how to use CSS for the RWD aspect but have no idea where I am supposed to do this. 

Re: Home Page images not working with RWD.

FWIW I don't use the wysisyg editor.  It changes my code and breaks things.  I have the default to not use the editor.  Images and slider work as desired on home page with rwd theme here.

Re: Home Page images not working with RWD.

Turns out the images were too small for the elevateZoom plugin.

One could force them to be big enough by doing something like 

$this->helper('catalog/image')->init($_product, 'image')->resize(800,600)