Support » Fixing WordPress » Problem with overlapping Divs

  • Resolved samd2020

    (@samd2020)


    Hi All,

    I have problem with left category menu not being clickable when the product only page is viewed mobile. The category box links work on all other pages and they work on the product page on desktop, but just not mobile.

    Here is an example: https://autoelecoz.com.au/product/dry-bag/

    I suspect there is an overlapping div affecting the clickability?

    If anyone could provide insight that would be great, thank you.

    Sam

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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.

    Thread Starter samd2020

    (@samd2020)

    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.

    Thread Starter samd2020

    (@samd2020)

    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 2 years, 7 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.

    Thread Starter samd2020

    (@samd2020)

    yes still present in incognito mode 🙁

    Thread Starter samd2020

    (@samd2020)

    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.

    Thread Starter samd2020

    (@samd2020)

    thank you

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Problem with overlapping Divs’ is closed to new replies.