AbanteCart Community

AbanteCart Development => Customization help => Topic started by: two_fist on August 31, 2016, 08:17:36 AM

Title: Responsive layout for Product Image on product page
Post by: two_fist on August 31, 2016, 08:17:36 AM

Hi, I am new to AbanteCart and in the process of building a web store. When browsing a product page with a small mobile device the product image seems to over hang on right hand side when everything else in the page layout responsive and inline . I am using default template and settings for Product Image thumbs. I am guessing this has something to do with the CSS and minimum widths for product image on different sized responsive devices. Please could someone guide me on how to change this?so product image appears responsive and in line with rest of the page (no over hanging on the right)

Thanks

Title: Re: Responsive layout for Product Image on product page
Post by: Basara on August 31, 2016, 08:22:53 AM

Hello.

default template style rules located in the style.css file
You need look for @media rules based on screen resolution like this one
https://github.com/abantecart/abantecart-src/blob/master/public_html/storefront/view/default/stylesheet/style.css#L3398

Title: Re: Responsive layout for Product Image on product page
Post by: two_fist on August 31, 2016, 08:29:12 AM

Thank you, what is the CSS name for just the product image thumb?

Title: Re: Responsive layout for Product Image on product page
Post by: Basara on August 31, 2016, 09:05:28 AM

Use firebug addon or browser inspector (right click on element "inspect") to check what element and css line you need to change