Why do x-icons have such large gaps on mobile

Support
#1

I have a feedback page here: https://elementpaints.com/feedback/

On that page I have a Text element, and inside that element I have 3 x-icons added via shortocde (happy face, neutral face, not-happy face).

It looks great on desktop but when you view it on mobile some strange things happen:

  1. There is a huge gap above and below each icon. How do I reduce this gap? See here: http://nimb.ws/n7vOuN

  2. On some mobile screen sizes the icons do not break correctly. It will show two icons on one row, and the third icon below. But it should be one icon per row on mobile view. See here: http://nimb.ws/AadUz7

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 530px){
    .feedback-faces {
        display: block;
        margin: 0 auto -100px;
    }
}