WooCommerce: Shop Page text falls right under the header on mobile.

  • Hi there,

    I hope someone is able to help me with this one. This is my very first time posting here so I’m not sure if I’m posting in the right section.

    I have managed to design my own website from watching YouTube tutorials, so I’m rather happy with my creation (insert laugh here)

    I finally managed to get everything up and running but I am having difficulty with the mobile version. The shop page on the mobile version starts directly under the header. I’ve tried everything in moving it down as well as googling solutions and even going to YouTube, but it doesn’t seem to help me resolve this issue.

    Is there someone that is able to advise me on how to fix this little headache please? If you open the posted link on your mobile phone, you will see the issue I’m having.

    Hoping someone can assist me please.

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

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @alrichst

    No worries! Please try this custom CSS:-

    @media only screen and (max-width: 768px) {
body.woocommerce-shop nav.woocommerce-breadcrumb {
     padding-top: 20%;
}
}

    I attached a screenshot for reference!

    https://imgbly.com/ib/2t8bSIinrD

    • This reply was modified 1 year, 10 months ago by niyaswp.
    Thread Starter Alrich

    (@alrichst)

    Hi there @niyaswp

    Thank you for the awesome help. It’s really appreciated it.

    I just pasted the code and tested it and it worked! ?? Now I have another problem… It seems my entire WooCommerce is like that. The All Products Page is fine now after your help, but the single product page, the cart, and the checkout are also overlapped by the header.

    Would you be able to help me with these as well please? If possible?

    Hello @alrichst

    No problem! Kindly use this code instead:-

    @media only screen and (max-width: 768px) {
 body.woocommerce header.site-header{
    position: relative !important;
 }
}

    Could you please clear your browser cache or try again from an incognito window?

    Thread Starter Alrich

    (@alrichst)

    Hi @niyaswp

    Thank you again for helping me with this. I appreciate it.

    Everything seems fine now besides the cart page. Please see screenshot below.

    https://imgbly.com/ib/pGcbqod30N

    Hi,

    The given CSS does not apply to the Woocommerce cart page so you need to use this code:-

    @media only screen and (max-width: 768px) {
 body header.site-header{
    position: relative !important;
 }
}

    or 

    @media only screen and (max-width: 768px) {
 body.woocommerce header.site-header, body.woocommerce-cart header.site-header{
    position: relative !important;
 }
}

    Hope this should fix the problem, please try this and let me know!

    Thread Starter Alrich

    (@alrichst)

    Hi @niyaswp

    So sorry for the delay. I just tested it and it’s working great! Thank you very much for the effort and kind assistance not to mention the very fast assistance you offered.

    I do appreciate it very much.

    Hello @alrichst

    Glad to know it’s working now!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘WooCommerce: Shop Page text falls right under the header on mobile.’ is closed to new replies.