Return to previous page

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

This topic has 11 replies, 3 voices, and was last updated 1 months ago ago by Andrew Mitchell

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

10 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

Please contact administrator
for this information.

#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
Luca Rossi

Support staff

September 21, 2024 at 15:58
Hi @QaQako,

If you want to add the custom ID for that section, please update the custom CSS codes to this:
```
@media (max-width: 600px){
    [data-id="6a5cf22"] {
        overflow-x: scroll;
    }
    
    [data-id="6a5cf22"] .e-con-inner > [data-element_type="container"] {
        min-width: 1024px;
        flex-wrap: nowrap;
    }
}
```
Let us know how it goes!
#415364 Copied
QaQako

Participant

September 22, 2024 at 19:10

hi hope youre doing good
thanks for your follow up

there is an issue i only want the pricing table to be scrollable to the right not the header
ive tried adding this css that you gave me and changed the id to the container with the table but it didnt work
and ive got an issue the css doesnt work if the princing table container content width is on boxed it needs to be on full width

thanks for your time

Please contact administrator
for this information.

#415435 Copied

Luca Rossi

Support staff

September 23, 2024 at 05:02

Hi @QaQako,

Please share us with your admin account so we can take a closer look.

Thank you!

#415451 Copied

Andrew Mitchell

Support staff

October 16, 2024 at 21:31

Dear QaQako,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

Click here to share your thoughts: https://themeforest.net/downloads

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#419039 Copied
Tagged: ecommerce pricing strategy, effective pricing tables, mobile friendly woocommerce, pricing comparison table, woocommerce customization, woocommerce mobile optimization, wordpress woocommerce templates
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘How to make a pricing comparison table (In one line on mobile)’' has been successfully resolved, and the topic is now closed for further responses

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

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection