Archived topic
Three pricing boxes don't scale well on tablet
1 reply · Started by Vladimir on April 13, 2022
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.
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.
