Display error on checkout and chart page on mobile

  • evoton

    (@evoton)


    1 month ago

    Hello,

    Please help me with the following problem. I contacted the WordPress support and they told me : “The view is caused by your PopularFX theme. I would recommend you contact their support forum.”

    So, you have below all the information.

    I have a WordPress website, done by myself (I have a penchant for IT).

    I added a shop on WooCommerce. In a week or so, I want to make the shop live, but unfortunately the checkout page and cart page are shown on MOBILE on two columns (looks bad) instead of one. On PC it looks fine, with 2 columns.

    I ask for help to one of my suppliers (IT courier guy- which installed for me a plugin for delivery) and he told me that the theme could give this error display.

    I tried almost all the codes on this forum (put them, each at a time), put it on appearance->CSS. Nothing worked. I also updated all my plugins.

    I need help, please for:

    1. a code to put in CSS- if needed
    2. to understand how can I make changes on my theme without loosing all my work (erase all the website, articles or anything).

    I put below the information needed.

    Theme Name: PopularFX, Theme Version:1.2.5, PopularFX Plugin Version:1.2.7

    Pagelayer Version: 1.9.1, Current Template: Vegetables

    Thank you for your time.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter evoton

    (@evoton)

    sorry, I mean Cart not chart.

    pagelayersupport

    (@pagelayersupport)

    Hi,

    Are you talking about the shop page and cart page shown on two lines on the menu in the mobile view?

    For that you can go to Dashboard > Pagelayer > Theme Templates > Header/Home Header > Switch to mobile view.

    You can refer to the below guide for designing in mobile view.

    https://pagelayer.com/docs/how-tos/how-to-design-in-responsive-mode/

    After switching to mobile view go to Edit Primary Menu Widget Settings inside the Header/Home Header page> Menu Style > Reduce Horizontal Padding.

    After that open the parent Column Settings of Primary Menu Widget and increase the Custom Width.

    If you are facing any other issue please elaborate on the issue in detail.

    Thread Starter evoton

    (@evoton)

    Hello, I am not talking about the main menu. To change that, I need to have a paid Pagelayer, and I don’t.

    I am bothered by the way the shop and cart pages are shown. I mean, when a user wants to buy my products, he chooses the products and in the end he gets on a page where the summary of the purchase and the delivery options are shown on 2 columns-only on mobile. I would have sent you a print screen but here you have to put a link and I don’t have a tool for this.

    • This reply was modified 1 month ago by evoton.
    Thread Starter evoton

    (@evoton)

    I put some printscreens on Google: https://photos.app.goo.gl/TkbMd5vBjCFgzGhdA

    Tell me if you see it. Thank you for your time.

    Thread Starter evoton

    (@evoton)

    Please help me. I want to put the shop online and it’s impossible to put it with this error. It looks bad.

    pagelayersupport

    (@pagelayersupport)

    Hi,

    The UI elements displayed in the image are part of the default WooCommerce interface. To enhance responsiveness, you can apply custom CSS. Simply navigate to
    Pagelayer > Website Settings > Header and Footer to add your custom styles.

    Thread Starter evoton

    (@evoton)

    What has to do header and footer with the middle (the information between header and footer)?

    My problem is not in the header or footer.

    If I decide to try, what is the custom CSS to insert?

    • This reply was modified 1 month ago by evoton.
    • This reply was modified 1 month ago by evoton.
    pagelayersupport

    (@pagelayersupport)

    Hi,

    You can insert the CSS Code in Pagelayer > Website Settings > Header and Footer.

    It would affect the elements in the middle of the page.

    You need to target the specific classses/ids of those elements.

    You can target the class/id of specific column and set its width to 100%

    I hope this resolves your issue.

    Thread Starter evoton

    (@evoton)

    Thank you! Great support.

    pagelayersupport

    (@pagelayersupport)

    Hi @evoton ,

    You’re welcome! I’m glad to hear you found the support helpful. If you have any more questions or need further assistance, feel free to ask!

    Regards,

    Pagelayer Team

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.