responsive thumbnail size

hey guys,

is it somehow possible to make the thumbnails on product catogory/listing/page responding to the screen size?

My problem is when viewed on a small screen (smartphone) the thumbnails are too big and reach over the sides of the page.

cheers

It would sure be helpful if you told a bit more on
- your configuration as far as relevant (bootstrap yes/no, image sizes, etc)
- your template (which one? responsive? bootstrap?)
- best even a link to your site

bootstrap: yes
image size: 400x400
template: gantry

the problem is the same for the thumbnails (Products list) and the product image on the product page.

the product page is in tabular mode (in default mode the problem doesnt occur, but I want the tabular one)

on the category page however the thumbnails width decreases when viewed on a small screen but the height stays the same.....so that there is a huge gap between image and title.

Sounds like it could be fixed with a little CSS tweak. No page link, so one could analyse the CSS? Without it it'll be very hard.

pschellenberger.com/index.php/pschellenb...uct/14-t-shirt-engel
and
pschellenberger.com/index.php/pschellenberger-collection
and
pschellenberger.com/index.php/pschellenb...-collection/t-shirts


when you make the window small like smart phone size you can see the problem


thanks

Ok, just took a look, and I'm pretty sure that you'll be fine after inserting the following code into your CSS, either the template (override) CSS file, or the (custom) HikaShop frontend CSS file:

.thumbnail div.hikashop_product_image_subdiv {
width:100% !important;
height: auto !important;
}

didnt work, still the same problems

i put this in the hikashop front end css

Yeah sorry, was too fast: posted that before you had your links here...

Strange, though, can't really get the image on product page to respond. Any limiting settings in your shop config under Main and Images? Perhaps post a screenshot of that config section?

i tried already to change the size and stuff without any success

cant attach screenshot

config image
thumbnail height and widt: no value
product page image width and height: 400
image width and height: 800

what about this?

.thumbnail div.hikashop_product_image_subdiv {
width:auto !important;
height: auto !important;
}

didnt work

petersch wrote: didnt work

Yup, I know. Nothing with CSS only seems to work. Think it's a "misunderstanding" of what your template on one hand and HikaShop on the other use for "responsiveness". Not that it must be relevant in this case, but had (other) trouble with Gantry templates before. I'm just saying this for you to understand that I stopped using them and am not familiar with them anymore. You should still be able to have your images responsive just as elsewhere on your site.

Anyhow, to me it looks as if it'll take a different approach with layout-relevant code in the views (where the product slider is a case by itself) to achieve responsiveness. Again, elsewhere on your site CSS for images with only max-width:100% and height:auto works, so it should be possible to make it work for images in HikaShop as well. But it might require altering at least some of the size settings in views...

this are the responsible files in views.

I am using the carousel for the products listing and the product page. and on the product page the order is tabular. so somewhere in here i need to put:

.thumbnail div.hikashop_product_image_subdiv {
width:100% !important;
height: auto !important;
}

Hmmm.

First: "Somewhere here"... well, certainly not this code in these view files you attached here, unless you wanted to turn it into in-line CSS.

Next: The code you're posting here again won't hurt, but it doesn't help, either.
The only place where you use the class "thumbnail" is in your category view at pschellenberger.com/index.php/pschellenberger-collection , and that's responsive already. So, it doesn't help anywhere else.

(In between: You should use Firebug or another browser console to analyse and test your HTML and CSS. Would save you a lot of stabbing around in the dark. I'm seeing more from here than you there...)

Then: I've done that for quite a while on your site yesterday, with lots of CSS settings that make stuff usually "responsive"... without success.

Tell me: Is it a Rockettheme template, or one of the Gantry "interpretations" of another template house? Which exact template is it?

Gantry v4.0
Gantry Framework Base Theme

i inspected the thumbnails on the collection and productlist site....like you said width is on 100% and heigth on auto...in bootstrap css....but this must be somehow overwritten by another css

can you actually change the css live in firebug (or in googlechrome, which i'm using)