icon too big for small screens + padding

Hello!

For this page *see private* I struggle with a few minor issues:

A) The pop-up icon with the letter ‘i’ in it is too big for small screens (tablet + mobile device) and also pops up in the middle of the text on tablet lay-out which I don’t want. Now I want to make it 60% smaller, but does not respond at this code:

@media only screen and (min-width: 768px) and (max-width: 989px) {
.page-id-407 .avia_transform .avia_start_delayed_animation.av_font_icon {
transform: 60% !important;
}
}

Also prefer this for mobile lay-out:

@media only screen and (max-width: 767px) {
.page-id-407 .avia_transform .avia_start_delayed_animation.av_font_icon {
transform: 60% !important;
}
}

B) General question; how can I handle ugly line-breaks in a page? I made all line-breaks for desktop layout with SHIFT + RETURN, but on tablet and mobile it looks real crappy…..I want to keep the same font-size for these smaller screens, just another place of line-break.

Can you tell me what I do have to change or do in both cases?

Best regards,
Me.llamo