[Support request] Three pricing boxes don’t scale well on tablet

Home Forums Support [Support request] Three pricing boxes don’t scale well on tablet

Home Forums Support Three pricing boxes don’t scale well on tablet

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2188291
    Vladimir

    Hi,

    On the top of attention.cc you will see 3 pricing boxes I added from your blocks section. On desktop they look great, but on tablet, they don’t scale properly. They should be centered with space between them. Can you please send me CSS code to fix it. On mobile they are all centered, but also need space between them. Thank you.

    #2188327
    Fernando
    Customer Support

    Hi Vladimir,

    To clarify, these Blocks are not from GeneratePress or GB, it is from WordPress.

    On Tablet, on my end, this is how it looks: https://share.getcloudapp.com/rRu158n5

    It has something overflowing though. You’ll need this CSS to fix that:

    @media (min-width: 769px) and (max-width: 1024px) {
        .wp-block-columns {
        overflow: hidden;
    }
    }

    On mobile, here is a CSS to place them in one column:

    @media (max-width: 768px) {
        .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child){
        flex-basis: unset!important;
        flex-grow: unset;
            margin: 10px 10px;
        }
    }

    It might also be beneficial to create a Pricing List from scratch through GenereateBlocks instead. You’ll be able to freely modify different aspects in GB Blocks through the Block editor as opposed to the WP one.

    Hope this clarifies.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.