Make text columns responsive for tablet on 7.0 site

Site URL: https://www.alpha-alt.com/home1#services

Hi I'm working on a 7.0 site and would like to make the 3 columns on this page (https://www.alpha-alt.com/home1#services) to stack into a single column with padding on either side for tablets.

Similarly, on this page https://www.alpha-alt.com/contact-us-new I'd like the locations to become 2 columns on tablet. 

Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:900px) and (min-width:641px) {
/* services */
section#services-pricing .span-8 {
    width: 100% !important;
}
section#services-pricing .span-8 .spacer-block {
    display: none;
}
/* Location */
div#block-e8127e97dcc62b666625+.row+.row {
& {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.span-2:nth-child(n+2):not(:last-child) {
    width: 35%;
}
.span-2:first-child, .span-2:last-child {
    display: none;
}}}

@tuanphan Thank you, that's a huge improvement!! 

On the Services page, is there a way to now make the columns centered? OR if not, to force them to stack?

On the Contact Us page, it appears half of the locations no longer show up. Is there a way to make those show up again? 3 columns would be fine.

Thank you!

On 1/8/2022 at 2:20 PM, christinedevs said:

@tuanphan Thank you, that's a huge improvement!! 

On the Services page, is there a way to now make the columns centered? OR if not, to force them to stack?

On the Contact Us page, it appears half of the locations no longer show up. Is there a way to make those show up again? 3 columns would be fine.

Thank you!

 

You can change 35% to 50%