Pricing Table: Different sizes on different devices & text cut off

Home Forums Jevelin Theme Pricing Table: Different sizes on different devices & text cut off

Home Forums Jevelin Theme Pricing Table: Different sizes on different devices & text cut off

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • simonbk
    Participant

    Hello,

    I’m using the pricing table module and have the following problem:

    1. On devices with a lower resolution (iPad etc.), the length of the tables is very different than on regular resolutions (see screenshots).

    I’ve already changed the font size of the title, but that doesn’t seem to help.

    Can I somehow give the part of the element with the title a fixed height to make sure that the table columns all have the same height?

     

    2. On devices with lower resolutions, longer words in the title get cut off (see screenshot, “Communicate”). How can I avoid this?

    I’m thankful for any help!

    Best,
    Simon

    Hi Simon,

     

    I hope you are well today and thank you for your questions.

     

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (max-width:1252px){
    #page-container .sh-pricing-top .sh-table-cell {
        word-break: break-word;
    }
    #page-container .sh-pricing-top {
        min-height: 275px;
    }
    }

     

    Best regards,
    Shufflehound team

    simonbk
    Participant

    Great, that seems to work. Can I do the same for the second part of the element? Thank you!

    simonbk
    Participant

    Seems to work with

     

    #page-container .sh-pricing-content-item {
    min-height: 475px;
    }

    simonbk
    Participant

    How about changing the font size in the content part of the element?

    I tried the following, without success:

     

    #page-container .sh-pricing-name body{ font-size: 23px; font-weight: 100; }

    #page-container .sh-pricing-content-item body{ font-size: 13px; font-weight: 100; }

     

    Thank you!

    simonbk
    Participant

    Found a solution (YellowPencil). Still, it seems impossible to find a height that looks good on mobile and desktop.

    You can try achieving this using Yellow Pencil editor as described in the below page.

     

    https://support.shufflehound.com/how-to-change-almost-any-element/

Viewing 7 posts - 1 through 7 (of 7 total)