Responsive Filter & Search Results

[tonygg]

Hi,

I am in the process of finally migrating to a responsive site. After help from the forum I have got my product and section list pages looking ok and behaving when resizing. I used a table with 2 rows to get the images and text centered. Here is a couple of examples:

Section list: http://www.tgurney.co.uk/acatalog/Qu...rk-Fabric.html
Product list: http://www.tgurney.co.uk/acatalog/Mo...Gathering.html

We use filtering on a number of pages. Unfortunately the results display left justified and the text seems to be bound to the same width as the image. For example:

http://www.tgurney.co.uk/acatalog/Clearance-Ranges.html
http://www.tgurney.co.uk/acatalog/Fa...c-Bundles.html

Additionally the images should be maximum of 200px by 200px but display as max 164px by 164 px

The code for filter results seems quite different to normal pages and trying to use a table to center the resulting image and text (like the normal pages above) doesn't look like it will work.

I was hoping someone might point me in the right direction to get the results looking similar to the regular pages? Bassically centered images (max 200px) and centered product names that use the full width of the "box".

Many thanks

Tony

[brucet]

Hi Tony

In http://www.tgurney.co.uk/acatalog/Clearance-Ranges.html, as far as I can see the images are displaying at their natural size of 150 x 150 px.

The following code added to your stylesheet will centre the text and make the images fill the available width:

.std-product-details a {
width: 100%;
text-align: center;

As it stands, that will cause the browser to enlarge the images beyond their natural size, which doesn't look good

The following code controls the size of the image itself:

.twoColumns .product-image a > img, .threeColumns .product-image a > img, .twoColumns .product-image > img, .threeColumns .product-image > img, .twoColumns .std-product-details img, .threeColumns .std-product-details img {

width: 100% !important;
max-width: 94%;

Changing 94% to 200px may give you the effect you're looking for. But you will need to provide images of at least 200 x 200 px for that to look any good

I hope this helps

[tonygg]

Hi Bruce.

Thank you so much. That is perfect. I would never have figured that out!

Now I just need to figure out why I get different text sizes on my breadcrumb trails in Chrome on mobile phones. It only happens on single product pages. Some times the breadcrumb trail is small text and the product name is big text. In many cases they are both big text. Struggling to see a pattern as one filtered paged (fat quarter bundles) behaves differently to another (clearance fabrics) and products opened from a section page mostly have big text on both but quite often the first product has small breadcrumb trail. The weird thing is you can't replicate it in the PC by making the browser single column.

Many thanks

Tony