Pricing Table Mobile View

When I load on desktop as mobile view, the layout switches to the table stacked, which I like. But when I actually load the website on any mobile device, it tries to cram the table into a side-by-side view that I don’t want. And I can’t find any CSS to fix this.

valorglobal.online/pricing

Thank you in advance for your quick help!

2 Likes

Hi @Adam_Moseley :wave:

I’ve relayed your request to our dev team. I’ll keep you posted here :slightly_smiling_face:

1 Like

Thanks.

2 Likes

Hi @Adam_Moseley :wave:

Thank you for waiting!

The issue is caused by Fluid Engine. To fix the issue, you need to reinstall the widget without using Fluid Engine. Here is an article (Eliminating paddings using Classic Editor) that explains how you can do this.

However, if you face any difficulties, please let us know. Our devs will gladly assist :slightly_smiling_face:

1 Like

If you use Classic Editor, you can also use this additional code, it will hide the “Upgrade” button, prevent the section from becoming a Fluid Engine

<script>

  ( ( ) => {
  
    /*
    
      fluid engine page section upgrade button hide
      
      License     : < https://bit.ly/3F8sn8W >
      
      Version     : 0.1.2
      
      SS Version  : 7.1
      
      Fluid
      Engine
      Compatible  : Not Applicable
      
      By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
    if ( window.frameElement == null ) return; // bail if not in Preview
    
    const style = parent.document.createElement ( 'style' );
    
    style.setAttribute ( 'type', 'text/css' );
    
    style.innerHTML = `
    
      .sqs-section-editing-ui .control-buttons-parent .control-button-wrapper-left [data-test="toolbar-button-convert"] {
      
        display : none;
        transform : unset;
        transition : unset;
        
        }
        
      .sqs-section-editing-ui.show-toolbar .control-buttons-parent .control-button-wrapper-left [data-test="toolbar-button-convert"] {
      
        display : none;
        opacity : 0;
        pointer-events : none;
        transform : unset;
        transition : unset;
        visibility : hidden;
        
        }
        
      `;
      
    parent.document.head.appendChild ( style );
    
    } ) ( );
    
  </script>
  
1 Like

This is not going to work for me because I am utilizing the Fluid Engine all over my site. If I revert to the Classic Editor it will change the entire layout of my site. Please advise moving forward and fixing this with CSS or an alternative solution.

Thanks!

On same page you can use a mix of Classic + Fluid Engine. Here, just use Classic Editor Section for Elfsight app only.

@Adam_Moseley Tuanphan is absolutely right.

Please try the suggested workaround and let me know if it helped :slightly_smiling_face:

I fixed it by not stretching out the code injection block to the edges of the screen, but instead making it inset on the page. I did not have to change to Classic Editor.

Oh, I got you.

Nevertheless, really happy to hear that you’ve manage to solve this issue and many for sharing this workaround with us!

If anything comes up, you are very welcome to contact us. We’ll be happy to assist!

Have a great weekend :wink:

Hi I’m facing the same issue also but I tried the classic editor and itisn’t working for me what should I do now. thank you

1 Like

I can’t take a screenshot right now, but I realized that in the mobile editor view, if I don’t drag the code block to the edges of the window, but instead keep it within the given margins, it works correctly, no code or anything needed. That was the fix for me. Let me know if you still need help.

All the best,
Adam Moseley

1 Like

I don’t have it all the way to the edges and its still not working

I have 4 pricing columns. Yeah i have zero idea why its not working I can take a video to show

Can you share link to page where you use Pricing Table? We can check problem easier

1 Like

Greetings @E_Finn :wave:

I am really sorry that you’ve faced this issue.

I see that you’ve opened a support ticket and my colleague Nataliya will contact you really soon :slightly_smiling_face:

1 Like