Home › Forums › WoodMart support forum › Issue with URLs on mobile view in Product Categories slider

Issue with URLs on mobile view in Product Categories slider

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 22, 2021 at 5:35 pm #313955

    ToriTori38
    Participant

    We have discovered an issue with the “Product Categories” slider on our home page since the last update. The issue is only on mobile devices (reduced screen widths), and not on desktop views.

    Just under the main slider on the home page, we have a product category slider. Whilst viewing in a reduced screen size, the first 2 categories you click on redirect you to the wrong URL (you are redirected to /produkt/wickeltaschen-accessoires/ rather than the correct URL). However in desktop view you are redirected to the correct product categories. This URL redirection error only happens when the screen-width is reduced to mobile size.

    Below I have given you the website details so you can look and hopefully tell me the issue. Please tell me what the issue is (don’t just fix it without telling me the reason) as I need to fix the issue which is also on our live site.

    I also attach a screenshot to explain more. Just switch your screen view between desktop and mobile and hover over the first 2 product category URLs to see their URLs. You will see these URLs change depending on the view size.

    Thank you

    Attachments:
    You must be logged in to view attached files.
    August 23, 2021 at 12:04 pm #314090

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Your issue has been solved. Please check the site after removing the browser cache. It was your site cache issue.

    Best Regards.

    August 23, 2021 at 12:21 pm #314099

    ToriTori38
    Participant

    Hello,

    Thank you but as I said can you please explain what you did to fix this as I need to fix the issue on our live site.

    On our live site I deleted the WP Rocket cache and I deleted also the Safari browser cache (mobile) but still problem persists. You must have deleted the cache elsewhere.

    Thank you

    August 23, 2021 at 1:32 pm #314120

    ToriTori38
    Participant

    Hi there,

    I deleted the browser cache but the problem on our staging site (the site link I gave you) is still there. Please look at the video I attached (private content).

    To recreate the issue, you need to refresh the page after you have reduced the screen width (if you are looking at this from a desktop).

    August 24, 2021 at 7:29 am #314233

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I am sorry but this is not the standard way of testing the site, every Theme in the world uses certain breakpoints to change the layout as per the screen resolution, and Woodmart also based on that theory, Woodmart uses the Bootstrap framework which works on certain predefined rules for the different layouts on different screen resolutions, like for Desktop ( start from 1025px), For Tablets ( from 992px to 1024px) For Mobile. ( end till 1023px) these are the standard points.

    So if you test the site like you are doing simply resizing the browser then on a certain point/screen resolution it must break the layout.

    You must have to test your site on real devices OR on an online simulator like Responsinator.

    Regards.
    Xtemos Studios

    August 24, 2021 at 8:32 am #314247

    ToriTori38
    Participant

    Hello Aizaz,

    I am starting to get a little frustrated with how many replies it is taking for you to try and understand/fix this issue. The only reason I told you to resize and refresh your browser window was in case you could not replicate the issue. Of course if you have a mobile device just test on the mobile device!

    This issue is NOT FIXED! I have deleted all browser cache and website cache, tested logged in and not logged in and via incognito mode. Problem is still there.

    As soon as you view the website from a mobile (reduced screen format size) then the first 2 categories in the “Product Category” slider have the wrong URL’s. The URL is only changed when viewing on mobile. It is some bug with your category product slider.

    Please just test on a mobile device and see the issue for yourself. The first 2 categories direct you to /produkt/wickeltaschen-accessoires/ which is wrong!

    August 25, 2021 at 11:23 am #314554

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    This is a bug in our theme related to the category style and option that disables the owl-carousel library on mobile.

    For a quick fix Please try adding the following Custom CSS in the Custom CSS for the mobile area under Theme Settings >> Custom CSS.

    .cat-design-center .wrapp-category {
  position: relative;
  overflow: hidden;
}

    This issue will be fixed in the next theme update.

    Best Regards

    August 25, 2021 at 12:18 pm #314567

    ToriTori38
    Participant

    Hi Aizaz,

    Many thanks for your reply. This solution is working on our development site, but when I add the CSS to our live site it does not seem to work. Can I ask you to please check why? I have also deleted all browser cache and am checking from an incognito tab, but it is not working on the live site. Maybe you made some other change?

    I have provided the link to our live site in the private content below.

    August 25, 2021 at 12:57 pm #314586

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    The Custom CSS should work on the live site as well. It seems that there are some syntax errors in the Custom CSS areas in your websites that’s why the CSS is not working for specific devices.

    Please make sure that there are no syntax errors in the Custom CSS you added before.

    Then clear cache and check back.

    Best Regards

    August 25, 2021 at 5:58 pm #314639

    ToriTori38
    Participant

    Hello Aizaz,

    On our live site, I have added the custom CSS above all the other CSS in the Customizer (to make sure it loads first) and still the problem is still there. The CSS you gave me is I believe loading correctly but it is not fixing the issue.

    Can you please advise. There must be some other explanation why that CSS is not working on the live site. Maybe the configuration of the Product Category slider?

    August 26, 2021 at 6:57 am #314703

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please provide with the admin panel login details of the live site to let me assist you further.

    Regards.
    Xtemos Studios

    August 26, 2021 at 3:13 pm #314788

    ToriTori38
    Participant

    Hello Aizaz,

    As it is a live site, I first need to make a copy of it any give you access to that. As soon as that is done I will give you access.

    Thank you

    August 26, 2021 at 6:21 pm #314806

    ToriTori38
    Participant

    Hello Aizaz,

    Please find below login details to an exact copy of our live site. It is a staging site.
    I have added the CSS you gave me into Woodmart’s Global CSS (at the top).

    Thank you for checking why your CSS is not working.

    August 27, 2021 at 7:05 am #314865

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I have logged into your website and the Custom CSS is now working.

    Screenshot for Clarification: https://gyazo.com/d9a47842de35655bf16b0287fe3e6361

    Best Regards

    August 27, 2021 at 7:26 am #314871

    ToriTori38
    Participant

    Hello Aizaz,

    Can you please let me know what you did to make it work. I need to now fix this bug on our live site. Please give me the exact steps you did to make it work, so I can correct on our live site.

    Thank you again

    August 27, 2021 at 10:17 am #314886

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    I have added the CSS to the Global Custom CSS area and also set the category design to Center title by editing the Categories Element and the CSS worked.

    Screenshot for Clarification: https://gyazo.com/76819f4a01569f2018e9d35061ac5616

    Regards.
    Xtemos Studios

    August 27, 2021 at 10:50 am #314901

    ToriTori38
    Participant

    Hello Aizaz,

    Ah that was the issue. The category design had not been set to center 🙂 Thank you for sharing that with me.

    All is now fixed. With the next update, I guess I can then remove that CSS you gave me so we are not loading unnecessary CSS?

    Thanks again for your help Aizaz

    August 27, 2021 at 10:59 am #314907

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    We are Glad that your issue has been Resolved.

    Yes you can remove this CSS after the Theme Update.

    Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

    Have a wonderful day.

    Topic Closed.
    Best Regards.

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Issue with URLs on mobile view in Product Categories slider’ is closed to new replies.