Problem with overlapping Divs

Hey @samd2020,

I found your issue, and as you mentioned is regarding overlapping divs.

More specifically, it is because of the bootstrap classes added to the sidebar aside and the main content div.

the current classes are,
for the “aside (sidebar)” – col-xs-12 col-sm-4 col-md-3 sidebar
for the “div (main content)” – col-sm-8 col-md-9

the issue – the main content div gets overlapped because of no col-xs-* class.

the solution,
change the classes to this,
for the “aside (sidebar)” – col-xs-12 col-sm-12 col-md-3 sidebar
for the “div (main content)” – col-xs-12 col-sm-12 col-md-9

I added a change for the sm classes as well since there is no chance the 4:8 cols will work in the “sm” device range.

Also, do look at https://developers.google.com/web/tools/chrome-devtools/remote-debugging for how to debug on the Chrome browser in mobile devices.

Hello samd2020,

Adding to what Ashwin suggested, I found the problem with the CSS classes and Position assigned to it.

Try what Ashwin suggested and let us know if that helps.

Thanks.

Thank you both so much that worked brilliantly.

While on that page, is there a way to get
a) the category accordion box to collapse initially; and
b) hide the ‘same day dispatch’ and ‘redarc reseller’ boxes on mobile but only on product page? I tried display: none for @media sections but it removes it from the homepage and other pages as well as the product page.

Thank you again,

Sam

Hey @samd2020,

Try adding a page specific class to your CSS selector, something like,
body.single-product .woo-cat-list { display:none; }

This will make sure that the CSS properties only apply to the page the CSS class is available in.

Thanks ashwin.

I added the line .single-product .woo-cat-list {display: none;} (with the word body at the front didnt work) to the style.css under @media only screen and (max-width:420px)

it hides them when i view them on firefox debug console after adding that but on google chrome or my iphone itself I can still view them?

• This reply was modified 5 years, 2 months ago by samd2020.

If that hide the sections in Firefox and you are still able to see them in Chrome or your iPhone, it would mostly be because of caching.

Try to check the site in an incognito/in-private window to confirm that the issue is fixed for the Chrome and iPhone scenarios.

yes still present in incognito mode ??

actually its working in incognito mode on my iphone but not on desktop chrome browser incognito. So i guess its working?

Thanks again for all of your help!

I too believe that it means the issue is fixed.

We would love it if you would mark this topic as resolved. This helps our volunteers find the topics that still need attention and more people will get helped, possibly like you did.

thank you