Author Topic: Responsive layout for Product Image on product page  (Read 3708 times)

Offline two_fist

  • Newbie
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile
Responsive layout for Product Image on product page
« 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

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5751
  • Karma: +273/-2
    • View Profile
Re: Responsive layout for Product Image on product page
« Reply #1 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

Offline two_fist

  • Newbie
  • *
  • Posts: 14
  • Karma: +0/-0
    • View Profile
Re: Responsive layout for Product Image on product page
« Reply #2 on: August 31, 2016, 08:29:12 AM »
Thank you, what is the CSS name for just the product image thumb?

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5751
  • Karma: +273/-2
    • View Profile
Re: Responsive layout for Product Image on product page
« Reply #3 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

 

Powered by SMFPacks Social Login Mod