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

This topic has 10 replies, 2 voices, and was last updated 3 weeks ago ago by Luca Rossi

  • Avatar: 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.
    9 Answers
    Avatar: Justin
    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

    Avatar: QaQako
    QaQako
    Participant
    September 18, 2024 at 18:59

    Thanks for your time

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

    Avatar: Justin
    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!

    Avatar: QaQako
    QaQako
    Participant
    September 19, 2024 at 18:43

    here you go

    Please contact administrator
    for this information.
    Avatar: Justin
    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!

    Avatar: QaQako
    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

    Avatar: Justin
    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!

    Avatar: QaQako
    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.
    Avatar: Justin
    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!

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.