Return to previous page

How to make a pricing comparison table (In one line on mobile)

This topic has 7 replies, 2 voices, and was last updated 12 seconds ago ago by QaQako

QaQako

Participant

September 17, 2024 at 20:28

Hi 8theme Support

How can i make like this Comparison Pricing table (look image) that doesnt shrink on mobile but instead you can scroll (look video)

here is the link from where i got the table : https://elementor.com/pricing-ecommerce-hosting/

Image : https://imgur.com/4Kivdyz

Thanks for your help

Files is visible for topic creator and
support staff only.

#414785 Copied Theme version: 9.4.1

6 Answers

Luca Rossi

Support staff

September 18, 2024 at 16:59

Dear @QaQako,

We hope this message finds you well. Could you kindly confirm if you have created a pricing table? If so, please provide us with the URL of the website where the table is located. This will enable us to assist you with the necessary custom CSS codes.

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

#414941 Copied

QaQako

Participant

September 18, 2024 at 18:59

Thanks for your time

here it is again : https://elementor.com/pricing-ecommerce-hosting/

#414953 Copied

Luca Rossi

Support staff

September 19, 2024 at 04:29

Hi @QaQako,

We meant your website not Elementor.com. Did you create a test page yet?

Thank you!

#414967 Copied

QaQako

Participant

September 19, 2024 at 18:43

here you go

Content is visible for topic creator and
support staff only.

#415120 Copied
Luca Rossi

Support staff

September 20, 2024 at 08:08
Hi @QaQako,

Please add the pricing_table ID to the section contains the pricing table.

Then add this custom CSS:
```
@media (max-width: 600px){
    #pricing_table {
        overflow-x: scroll;
    }
    
    #pricing_table .e-con-inner > [data-element_type="container"] {
        min-width: 1024px;
        flex-wrap: nowrap;
    }
}
```
Hope it helps!
#415181 Copied
QaQako

Participant

September 20, 2024 at 12:27
im not sure if i used it the right way
is this the id youre talking about : https://imgur.com/QriNY4h
here is what ive wrote
```
@media (max-width: 600px){
    #1114918 {
        overflow-x: scroll;
    }
    
    #1114918 .e-con-inner > [data-element_type="container"] {
        min-width: 1024px;
        flex-wrap: nowrap;
    }
}
```
thanks for your time
#415263 Copied
Tagged: ecommerce pricing strategy, effective pricing tables, mobile friendly woocommerce, pricing comparison table, woocommerce customization, woocommerce mobile optimization, wordpress woocommerce templates
Viewing 7 results - 1 through 7 (of 7 total)