Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 21, 2022 at 11:55 am #1359009
    ivanglaser

    Hi
    If you click the links below using a MOBILE device, you will see how the top of the page is under the menu/header
    Its only like this on Mobile device.
    It’s behaving like the page has a transparent header, I think
    How do I fix that ?
    I don’t seem to have those pages in my WordPress PAGE view
    Tx in advance for your help
    Ivan

    July 21, 2022 at 12:07 pm #1359014
    ivanglaser

    To be clear, I don’t have access to the PRODUCTS page to modify it

    I think I can fix the CHECKOUT and CART pages with a workaround

    July 21, 2022 at 12:15 pm #1359017
    ivanglaser

    UPDATE

    I have managed to fix the problem on the CHECKOUT and CART page with a workaround

    However I have no access to the PRODUCTS page so I cant do the same

    So my only issue remaining in this thread can be seen of you click on the link below using a mobile device

    The product image appears under or very close to the menu/header

    July 21, 2022 at 1:14 pm #1359025
    Mike

    Hi,
    Thank you for your link, the reason the image so so close to the top is because this custom css has removed the padding-top on mobile with this css:

    @media only screen and (max-width: 767px){
.responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
}
}

    please look for the custom css and remove, then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

    July 21, 2022 at 2:23 pm #1359029
    ivanglaser

    Hi Mike
    Interesting. I searched my “quick CSS” as well as my theme editor and I do not see that CSS anywhere in those areas
    Where else might it be ?
    Ivan

    July 21, 2022 at 6:42 pm #1359051
    Mike

    Hi,
    I can’t see which file it is in because it looks like you are using caching, but here is a screenshot of what I see:
    2022-07-21_005.jpg
    please disable all caching, server and any plugins, and include an admin login in the Private Content area and we will try to disable it for you.

    Best regards,
    Mike

    July 22, 2022 at 1:10 am #1359113
    ivanglaser

    Hi
    To be honest, I am not 100% sure I know which plugins I have perform caching…..or how to turn them off.
    My site is still a WIP with not that much traffic so I have included an admin login for you below.
    Disable whatever you feel is necessary…..just as long as you re-enable after or if you don’t for a particular reason, let me know
    Thanks a lot
    Ivan

    July 22, 2022 at 11:50 am #1359162
    Mike

    Hi,
    Thank you for the link to your site, I believe that your webhost has some caching enabled and it is connected to JetPack because JetPack has this message:
    Jetpack is automatically managed for you.
    I don’t want to disable to test because typically JetPack requires a specific plugin login to re-enable and I don’t know it.
    So if you added JetPack and know the login, please disable, if your webhost added JetPack with a custom WordPress install, please ask them how to disable it and the server caching for testing.
    This whole issue could be due to server caching and once cleared it may be solved, I don’t think that this css is part of the default theme because we don’t typically use !important;, I also don’t recognize your site’s caching file /_static/??- so I can’t advise about it.
    Please post which host you are using and your host’s reply about JetPack and its caching in the Private Content area for our knowledge to help future users on the same webhost.

    Best regards,
    Mike

    July 22, 2022 at 12:21 pm #1359170
    ivanglaser

    Hi. My site is hosted by WordPress themselves

    I can disable all the caching in the jet pack plugin and the jet pack boost plugin if you like

    Would that help?

    Ivan

    July 22, 2022 at 12:34 pm #1359180
    Mike

    Hi,
    Please disable the Jetpack plugin.

    Best regards,
    Mike

    July 22, 2022 at 1:28 pm #1359188
    ivanglaser

    Hi
    I cant disable the entire Jetpack plugin but I have disabled all the “performance” features
    I disabled Jetpack Boost
    I disabled Page Optimiser
    Cheers
    Ivan

    July 22, 2022 at 6:19 pm #1359218
    Mike

    Hi,
    Thank you, please try adding this css to add some space above the product image for mobile devices.

    @media only screen and (max-width: 767px) {
.responsive #top.single-product #main {
    margin-top: 60px !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 23, 2022 at 12:05 am #1359250
    ivanglaser

    Hi Mike
    That worked perfectly. Thank you !
    Did you find the code that set the padding to ZERO ?
    Ivan

    July 23, 2022 at 10:26 am #1359266
    Nikko

    Hi Ivan,

    The code that sets padding to zero on mobile is coming from layout.css (which is inside a media query):

    .responsive #top #main {padding-top:0 !important; margin:0;}

    Best regards,
    Nikko

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Issue with Woocommerce Cart, Product and Checkout pages on MOBILE devices’ is closed to new replies.