Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1413180
    danciocan
    Participant

    https://imagepro.institute/portfolio-item/personal-bundle-bronze/

    What am I doing wrong? It does not behave in a responsive way on my devices (large monitor as well as cellphone).

    Thanks!

    #1413452
    Christian
    Moderator

    Hey there,

    The Pricing Table is responsive. Could you give us more details why you’re saying it’s not responsive? Please give us screenshots of the pricing table in desktop, tablet and phone view.

    Thanks.

    #1413821
    danciocan
    Participant
    This reply has been marked as private.
    #1413830
    danciocan
    Participant
    This reply has been marked as private.
    #1414549
    Friech
    Moderator

    Hi There,

    The pricing table is responsive, its just the container is narrow and the table has a lot of items on it. So we need to adjust the text sizes and adjust some paddings. Please add this on your custom CSS.

    .x-pricing-table .x-li-icon,
    .x-pricing-column-info .x-btn {
    	font-size: 0.75em;
    	padding-left: 10px;
    	padding-right: 10px;
    }
    .x-pricing-table .x-price {
    	font-size: 200%;
    }

    On mobile, regretfully we can’t make the table columns stay inline, It will stack on top of each other because that’ll make column more narrower if we force to inline it. You need to use a different presentation on how you can display the prices in mobile view effectively. Try the card element, prices on the front and packages on the back.

    You can utilize the Hide Base on Screen Width feature to display a different section on desktop and mobile.

    Hope it helps, Cheers!

    #1427260
    danciocan
    Participant
    This reply has been marked as private.
    #1427312
    Christian
    Moderator

    Hey there,

    To make it fit the page, the portfolio sidebar must be eliminated or moved to the bottom. To do that, please add the code below in your Appearance > Customize > Custom > Global CSS

    .x-portfolio .entry-info {
        width: 100%;
    }

    The Pricing Table is best displayed in a wide container especially if you have 4 columns.

    You can edit it in Cornerstone but note that you can edit the contents only and not the portfolio sidebar. If you don’t see the Cornerstone tab in your Portolio item editor, please go to Cornerstone and enable the X Portfolio in the allowed post types.

    Thanks.

  • <script> jQuery(function($){ $("#no-reply-1413180 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>