Adding CSS to optimize mobile view

Question

Asana: https://app.asana.com/0/1203477406084155/1203713879149899/f

This page for Christ the King https://my.ctk.church/give/manage on mobile view has a lot of padding around the text. This makes "Edit Scheduled Gifts" really tall when you are logged in. There is a CSS block on the page but I'm not sure how to edit it to make the change.

Comments

(Originally by Unknown) Taking a look at this

Answer 1

Originally posted by Unknown

I added the following CSS to the Block called "CSS"

@media(max-width: 567px){

    .dts-d-flex > div {
        flex-basis: 100% !important;   
    }

}

This ensures the flex elements take up 100% width when the screen is 567px or smaller