Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: responsive issues: text/image overlap and missing menu  (Read 4228 times)

Offline trico

  • Newbie
  • *
  • Posts: 6
  • Karma: +3/-0
    • View Profile
responsive issues: text/image overlap and missing menu
« on: August 04, 2016, 06:57:42 PM »
I am having a couple of responsive issues that show up in some screen sizes (seem to be browser independent). Am running 1.2.7.

In one case, the product photo and product text regularly overlap (see screen shot) - the degree of overlap varies depending on the browser window size. In some cases it looks like the text solidly covers the product photo (which I'm not too concerned about) but in others (as attached) the image is visible underneath the pricing info. I've found that if I resize the browser window, this will correct at some point, but it has been showing up regularly on some default window sizes. Is this a responsive issue or maybe an issue with the product images (png format) or something I might have accidentally modified or need to modify (can the images re-size along with the rest of the webpage)?

A second case involves the disappearance of the menu at the top (see both screen shots). I have noticed this, for example, in Edge, Firefox etc. at some browser window sizes and on the ipod. There appears to be a sizable "size gap" between where the full menu disappears and is replaced with a drop-down menu. Is there something I can modify to change this, i.e. make sure that the drop-down menu appears as soon as the full menu can't be displayed?

Thanks,

Jodi

A "normal" screenshot with the menu is also attached.
« Last Edit: August 04, 2016, 07:00:59 PM by trico »

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5819
  • Karma: +274/-2
    • View Profile
Re: responsive issues: text/image overlap and missing menu
« Reply #1 on: August 05, 2016, 01:10:17 AM »
Hello.

The menu font color is white, so when your browser window width is not enough your menu items jump to next line where background is white so it looks hidden for you... you need to remove few items from menu to make is shorter or change CSS rules

Offline trico

  • Newbie
  • *
  • Posts: 6
  • Karma: +3/-0
    • View Profile
Re: responsive issues: text/image overlap and missing menu
« Reply #2 on: August 05, 2016, 01:25:54 PM »
Thanks for the info on the menu - makes sense and should be easy to modify.

Any thoughts on the product image and text overlap? Is that something I can similarly modify?

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5819
  • Karma: +274/-2
    • View Profile
Re: responsive issues: text/image overlap and missing menu
« Reply #3 on: August 08, 2016, 03:09:16 AM »
Hello.
I think this can be changed with CSS. Use browser inspector or firebug in firefox to inspect this part of page and find what CSS rules your need to change

 

Database Error

Please try again. If you come back to this error screen, report the error to an administrator.