product img div overlaps price-no responsive code?

-- url of the page with the problem -- : www.hotpicksusa.com
-- HikaShop version -- : 2.5.0
-- Joomla version -- : 3.4.3

Similar is scope to this thread: www.hikashop.com/forum/product-category-...ile-view.html#200027

I am having a very similar issue in the desktop size, until the media size drops to the point the pricing and info falls below the main image. This is because the images are using 400 pixels square as size in the admin as the default.

I have tried every CSS hack and modification I can think of on not only the "display" via the hikashop admin but also the front end stylesheet. I did find where to add some padding on the left side of the pricing div but it only works for the full desktop size. When I look at an iPad in landscape mode, and the column sizes start squeezing together, it would still revert back to overlapping.

Ideally, the best fix for this would be somehow to apply a z-index where the image was set negative and the price div set positive so the price div always remained on top if it overlaps. z-index is obviously coming in to play somewhere because the image overlaps the text.

On the other hand... why aren't the images for the products done per bootstrap? You use one large image, and every screen rendering uses the bootstrap: class="img-responsive" code to re-size on the fly? I need to have my images show up as large as possible at any screen resolution because the products themselves are so small.

Thank you for any help with this!

OK, so my question is where exactly do I modify the code to make sure the left side container is at least 400 pixels? I looked through every style sheet and the code but could not find where to edit the code to affect this?

But that also comes back to my additional question. If this container (div?) for the image is being hard coded to 400 pixels, that works for desktop, but is too big for tablet and mobile I would think. Shouldn't there be a better solution using the responsive attributes (img-responsive) via bootstrap so the image re-sizes based on viewport window size?

Do the cart templates you use that we can buy take this into consideration and work better than the default settings? We just want the best most elegant solution, even if it costs a bit more money.

Thank you!

OK, I tried every place in the code possible to make the page display differently by hard coding width=400px in

Product --> show_block_img

Nothing I changed by hardcoding affected the overlap.

Plus a change like this means if I ever have to change the image size in the admin, I would have to remember to change this hard code, and that doesn't seem right.

I am still not understanding why this left DIV holding the image is overlapping the right area. Why is it not pushing the right DIV more to the right? It seems your code was not designed to accommodate images past a certain size? Is there not a way to just change the z-index so if there is overlap, the text on the right always displays over the top of any image? That seems to make the most sense and eliminate any hard coding?

Thank you for this solution! I just need to know where to put this code so it over-rides what's there already... Should I replace the @media css in the front end style sheet? Place it at the end to over ride the existing @media css? Put it in the code section via he admin for show_block_img in a style tag?

Also, I am not saying hack the image width. I am meaning instead of indicating any pixel width at all, bootstrap uses the built in class style img-responsive which fills the existing div and then as the div shrinks, so does the image? I am just not understanding why you are using a section in the admin to pre-determine default image height/width when what makes more sense is to say product images should be at least xxx pixels by xxx pixels and let bootstrap and responsive handle the image fitting properly at any screen size? Or is this already the case if you leave image height and width blank if your template uses the responsive option to display images?

Thank you!

I added this code at the end of the Front-End CSS file so it should over-ride anything previous... it didn't change anything?