AbanteCart Community

Shopping Cart Operations => Support => General Support => Topic started by: trico on August 04, 2016, 06:57:42 PM

Title: responsive issues: text/image overlap and missing menu
Post by: trico 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.

Title: Re: responsive issues: text/image overlap and missing menu
Post by: Basara 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

Title: Re: responsive issues: text/image overlap and missing menu
Post by: trico 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?

Title: Re: responsive issues: text/image overlap and missing menu
Post by: Basara 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